Vue Axios CORS策略：否'Access-Control-Allow-Origin'

Question

我使用vue和codeigniter构建了一个应用程序，但是当我尝试获取api时遇到问题，我在控制台上收到此错误

Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-origin is not allowed 
by Access-Control-Allow-Headers in preflight response.

我一直在前端（main.js）上这样尝试过

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

而这个在后端（控制器）

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

和vue登录方法

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

我已经在stackoverflow中搜索并尝试过，但是没有用，如何解决？非常感谢你的帮助

Answer 1

可能会发生这种情况，您正在尝试为前呼叫另一个主机 - 您的 Vue 应用程序正在 localhost:8080 上运行，但您的后端 API 正在http://localhost:8888 上运行 在这种情况下，axios 请求正在寻找此 localhost:8080/project/login而不是这个 http://localhost:8888/project/login

要解决此问题，您需要在 vue 应用程序中创建代理

按照此说明创建 js 文件 vue.config.js 或 webpack.config.js 如果您还没有在根文件夹中

然后包括在下面

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

如果您需要多个后端，请在下面使用

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },

    }
}

如果您选择终点前面的第二个，请使用 V1 或 V2 ex - 您的终点是 /project/login，然后根据主机使用 V1/project/login 或 V2/project/login

Answer 2

CORS是服务器，它告诉客户端允许客户端发出哪种HTTP请求。每当您看到Access-Control-Allow-*标头时，标头应由服务器而非客户端发送。服务器“允许”客户端发送某些标头。客户端授予自己的权限是没有意义的。因此，请从您的前端代码中删除这些标头。

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          // remove headers
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

例如，假设您的后端设置了此cors标头。

header("Access-Control-Allow-Methods: GET");

这意味着来自不同来源的客户端仅被允许发送GET请求，这样axios.get就可以工作，axios.post失败，axios.delete失败等等。

Answer 3

在我的情况下 curl && postman 工作但不是 vue axios.post

从源“ http://%%%%.local ”访问“ http://%%%%:9200/lead/_search ”的XMLHttpRequest已被 CORS 策略阻止：请求标头字段 access-control-allow-预检响应中的 Access-Control-Allow-Headers 不允许原点。

所以，问题出在 vue 端而不是服务器！

服务器响应包含“access-control-allow-origin: *”标头

Answer 4

即使服务器端一切正常，我也遇到了同样的问题..

问题的解决方案是我点击的 API 链接在末尾缺少斜杠 (/)，因此产生了 CORS 错误。