如何使用 http 解决 VUE 中的 CORS 问题？答案

【问题标题】：How can I resolve problem CORS in VUE using http?如何使用 http 解决 VUE 中的 CORS 问题？
【发布时间】：2020-09-03 09:05:49
【问题描述】：

我使用 Sails + Vue 创建了该项目，我将在 github 上与其他人分享该项目。

我对 cors 有疑问。

在 backend() 中，安全的代码是：

module.exports.security = {
   cors: {
      allRoutes: true,
      allowOrigins: '*',
      allowCredentials: false,
   },
   csrf: false

};

在前端（vue）中我扩展了库 axios，并创建了 http

import axios from 'axios';

export const HTTP = axios.create({
    baseURL: `http://localhost:1337`,
    headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
       'Authorization': `Bearer ${localStorage.getItem('token')}`,
       'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
    }
})

并且在请求中使用http

import {HTTP} from './http-common';

export default {
   post (user) {
      return HTTP.post('/api/v1/entrance/signup', user)
      .then((response) => Promise.resolve(response))
      .catch((error) => Promise.reject(error))
   }
}

所以，我在 post 用户中使用 HTTP，但我遇到了 CORS 问题。但是我在postUser中使用axios，我对CORS没有问题。代码：

import axios from 'axios';

export default {
  post (user) {
    return axios.post('http://localhost:1337/api/v1/entrance/signup', user)
    .then((response) => Promise.resolve(response))
    .catch((error) => Promise.reject(error))
  }
}

我想要解决问题的建议。谢谢大家

【问题讨论】：

1.您不必在客户端请求中设置 CORS 标头（如 Access-Control-Allow-Origin）。如果在服务器端启用了 CORS，这些标头将作为响应
你在哪里打电话给axios.post('http://localhost:1337/api/v1/entrance/signup', user)？服务器端还是客户端？
@Anatoly 我在客户端打了电话。
你得到了什么确切的错误？
@Anatoly 我编辑了帖子并添加了图片。

标签： node.js vue.js sails.js vuex vuetify.js

【解决方案1】：

这是一个常见问题。您的客户端在 8080 端口上运行，而 Sails 服务器在 1337 端口上运行，它们被视为不同的域。

我通常建议人们在客户端使用代理来将所有请求代理到服务器，这样就没有问题了。由于 Sails.js 会话使用 cookie 的方式，这特别有用。如果您使用的是 webpack DevServer，这很容易设置。这是 DevServers 文档的链接 - proxy。

如果您仍想在此域配置中修复 CORS，则必须在服务器端进行。在 Sails.js 应用程序的根目录中编辑 config/security.js。在那里你会看到一个 CORS 设置被注释掉了。它看起来像这样：

  // cors: {
  //   allRoutes: false,
  //   allowOrigins: '*',
  //   allowCredentials: false,
  // },

将其更改为允许您的客户端本地主机域，如下所示：

  cors: {
    allRoutes: true,
    allowOrigins: ['http://localhost:8080']
  },

您可以恢复客户端更改。

请注意，您可能需要在您的 axios 调用中添加 withCredentials 选项，否则浏览器将不会发送任何 cookie。

axios.get('some api url', {withCredentials: true});

【讨论】：