Is there any solution to solve CORS error in Vite js? [duplicate]

Question

I tried all the solutions which were provided by developers for the same issue. I updated the Vite.config.js file like that-

//vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    proxy: {
    '/api': {
      target: 'http://localhost:3000/',
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/api/, '')
    },
    cors:false
    },
  },
  define: {
    'process.env': {}
  }
})

I added header properties in both files-

//Login.vue

 const header = {
              headers: {
                  'Authorization': 'Bearer ${accessToken}',
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Headers': '*',
                  'Access-Control-Allow-Methods': POST, GET, OPTIONS,
                  'Access-Control-Allow-Credentials': true,
                  'Sec-Fetch-Mode': no-cors,
                  'Sec-Fetch-Site': same-site
                  
              },

//App.vue

const header = {
              headers: {
                  'Authorization': `Bearer ${accessToken}`,
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Headers': '*',
                  'Access-Control-Allow-Credentials': true,
                  'Sec-Fetch-Mode': no-cors,
                  'Sec-Fetch-Site': cross-site,
                  
              },

But, when I inspect the code and see under the network header property-

How can I change these header properties or any other way to solve this CORS problem. I want to solve for the frontend side only. Currently, I am running this application in Chrome by disabling security chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security but I want to run it to all the browsers without disabling security.

Get Error-

Any valuable suggestion will help me a lot. Thanks in advance

Answer 1

First, you do not need the 'Access-Control-...' headers on the client side. So you can remove these. You can only set CORS on the server side, in your case this is the Vite server.

You defined a proxy on in the Vite server, but I think you made a mistake there. The target must be the url of the real api server, for example https://example.com/realApi.

Next, in your Vue app, you need to call the api with the local url of your Vite dev server, usually http://localhost:3000 and use /api as the path. Vite will rewrite the url like:

http://localhost:3000/api/TheApiYouAreCalling --> https://example.com/realApi/TheApiYouAreCalling

See vite docs server.proxy and node-http-proxy docs for options.

Hope this helps.

Edit: If you need a proxy in production, you can fairly easy build a node.js proxy with http-proxy. The code below is an example, where your proxy is located at /proxy on your server. The downside may be that you need to run node.js on your server. The example below is using http, for https see http-proxy docs.

var http = require("http");
var httpProxy = require("http-proxy");

var proxy = httpProxy.createProxyServer({});

const server = http.createServer(function (req, res) {
  if (/^\/proxy\/api/.test(req.url)) {
    req.url = req.url.replace(/^\/proxy\/api/, "");
    proxy.web(req, res, {
      target: "https://example.com/realApi",
      changeOrigin: true,
      secure: false,
    });
  } else {
    res.writeHead(200, { "Content-Type": "text/plain" });
    const response = "Proxy running...";
    res.end(response);
  }
});

server.listen(8080);