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-使用V1 / project / login或V2 / project / login之前，您的端点是/ project / login 根据主机

Answer 2

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

Access-Control-Allow-*

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

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

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

这意味着仅允许来自不同来源的客户端发送GET请求，因此header("Access-Control-Allow-Methods: GET");可以工作，axios.get会失败，axios.post会失败，等等。

Answer 3

即使服务器端的一切都很好，我也遇到了同样的问题。

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

Answer 4

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

示例：

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

Answer 5

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

CORS策略已阻止从来源“ http://%%%%:9200/lead/_search”访问“ http://%%%%.local”处的XMLHttpRequest：Access-Control-Allow-不允许请求标头字段access-control-allow-origin飞行前响应中出现标题。

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

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

Answer 6

Dev Proxy是您的解决方案

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

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

更多关注https://cli.vuejs.org/config/#devserver-proxy

Answer 7

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

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

Answer 8

你可以试试：

在后端，

npm install cors
然后，在后端 app.js ，添加以下内容，

const cors = require('cors')

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

希望能有所帮助。

Answer 9

在我的情况下，将它添加到我的后端 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");

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

9 个答案: