How to fix CORS policy issue with get request?

Question

please help me to solve CORS policy issue, it happens when I'm trying to make a get request to applications endpoint, and issue is only reproducible from http://localhost:8080/ on prod request works fine.

vue.config.js file

module.exports = {
    devServer: {
        proxy: 'https://spinstatus.zenoss.io/'
    }
}

request method

const grabApps = async () => {
  const res = await axios({
    method: 'get',
    url: `${spinnakerURL}/gate/applications`,
    withCredentials: false,
    crossdomain: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  });
  return res.data || []
}

error

headers from localhost request

headers from prod request

CORS headers have to be set by the **server** as part of the response. — Pointy, Jan 18 '22 at 16:44
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Jan 27 '22 at 14:09

score 1 · Accepted Answer · answered Jan 18 '22 at 16:47

1

Change the devServer configuration in vue.config.js like this:

module.exports = {
  devServer:
  {
    proxy:
    {
      '/gate':
      {
        target: 'https://spinstatus.zenoss.io',
        changeOrigin: true,
        onProxyReq: (proxyReq, req, res, options) =>
        {
          proxyReq.setHeader('Origin', 'https://spinstatus.zenoss.io');
        }
      }
    }
  }
};

answered Jan 18 '22 at 16:47

IVO GELOV

13,496
1
17
26

thanks, but that config is not working :( – asddsa Jan 18 '22 at 16:59
I am using it in my projects - it definitely works. But the error says that your API server in dev is not returning `Access-Control-Allow-Origin` HTTP header. – IVO GELOV Jan 18 '22 at 17:00
i see, ty for that – asddsa Jan 18 '22 at 17:09

How to fix CORS policy issue with get request?

1 Answers1