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中搜索并尝试过，但不起作用，我该如何解决？非常感谢你的帮助

原文由 Ashtav 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 会失败，等等

原文由 Eric Guan 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 如果您还没有在根文件夹中

然后包括在下面

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

更多详情请访问 ——Vue 官方文档

原文由 Chameera W. Ashan 发布，翻译遵循 CC BY-SA 4.0 许可协议