Vue Axios CORS 政策：没有“访问控制允许来源”

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

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 2

这可能发生在您尝试为 ex 调用另一个主机 - 您的 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，请按照此说明创建 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 - 在使用 V1/project/login 或 V2/project/login 之前，您的终点是 /project/login 根据主持人

Answer 3

就我而言 curl && postman 有效，但 vue axios.post 无效

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

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

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

Answer 4

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

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

Answer 5

在我的情况下，在我的 php 后端 API 函数中添加它就可以了

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS, post, get');
        header("Access-Control-Max-Age", "3600");
        header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        header("Access-Control-Allow-Credentials", "true");

Answer 6

我正在 Vue.js 中构建一个应用程序，并在 main.js 文件中添加了全局标头

例子：

axios.defaults.headers.get['header-name'] = 'value'

Answer 7

开发代理是您的解决方案

使用 DevProxy，您可以定义 Node（服务器运行 vue-cli 开发服务器）将流量路由到的特定路径或通配符（非静态）。

一旦定义（vue.config.js 中的单个条目），您使用与 UI 相同的 URI（相同的主机和端口）调用您的 api，并且 Vue 将请求重定向到 API 服务器，同时提供正确的 CORS 标头。

多看https://cli.vuejs.org/config/#devserver-proxy

Answer 8

为了处理 CORS 问题，您现在可能必须在客户端进行更改，这不仅仅是服务器问题。

Chrome 有几个插件：https://chrome.google.com/webstore/search/cors?hl=en

Answer 9

你可以试试：

在后端，

1. npm install cors

2. 然后，在后端 app.js 中，添加以下内容，

   const cors = require('cors')

   app.use(cors({ 来源：['http://localhost:8082']， }))

希望对您有所帮助。

Answer 10

在某些情况下，这不是 vue 问题。有时是后端问题。在我的情况下，我在 Nest JS 中创建了 API，但我没有启用 CORS = true 。这就是我收到 CORS 策略错误的原因。