-1

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- enter image description here

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

Shikha Dev
  • 27
  • 3
  • What CORS error message are you getting? Also, you seem to be mixing request headers and response headers. – jub0bs Mar 25 '22 at 17:15
  • I updated the CORS Error message in the question @jub0bs. Could you please check? – Shikha Dev Mar 28 '22 at 07:44
  • Your question doesn't tell what you do with that `header` constant. See https://stackoverflow.com/help/minimal-reproducible-example – jub0bs Mar 28 '22 at 08:25

2 Answers2

3

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. De 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);
Gabe
  • 141
  • 4
  • No, that is correct the proxy will not be build by Vite. You can fairly easy create your own proxy, though it requires you to run node.js on your server. You can use [http-proxy](https://github.com/http-party/node-http-proxy) for this. – Gabe Jun 01 '22 at 06:19
  • @JamesP I added an example in my answer above. – Gabe Jun 01 '22 at 06:31
0

You cannot solve CORS on front-end.

tauzN
  • 2,865
  • 1
  • 12
  • 15