如何通过获取请求解决 CORS 策略问题？

Question

请帮助我解决 CORS 策略问题，它发生在我尝试向应用程序端点发出获取请求时，并且问题只能从 http://localhost:8080/ 重现，产品请求工作正常。

vue.config.js 文件

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

请求方式

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

Answer 1

像这样更改 vue.config.js 中的 devServer 配置：

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

如何通过获取请求解决 CORS 策略问题？

How to fix CORS policy issue with get request?

javascript

cors

vue.js