vite config proxy config don't rewrite path

Viewed 26

I have a cors issue in my development with vue3 & vite, so I create a proxy config in my vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    proxy: {
      "/api": {
        target: "https://###.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    }
  }
})

when I use in my app my method:

createPayment() {
        const url = "/api/webhook/###";
        let formData = new FormData();
        formData.append("firstName", this.first_name);
        formData.append("lastName", this.last_name);
        formData.append("email", this.email);
        formData.append("phone", this.phone);
        formData.append("cardNumber", this.c_number);
        formData.append("cardExpiration", this.c_EXP);
        formData.append("cardCCV", this.c_CVC);
        const request = new Request(url, {
          method: "POST",
          body: formData,
          headers: {
            accept: 'application/json',
            contentType: "application/json;charset=UTF-8",
            AccessControlAllowOrigin: '*'
          },
        });

        fetch(request)
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    },

The Post all ways send from localhost, I can't understand why? I make the config for change '/api' to 'https://###.com' ?

My Log:

Response {type: 'basic', url: 'http://localhost:3000/api/webhook/####', redirected: false, status: 404, ok: false, …}
0 Answers
Related