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

Posted 2023-02-22

【中文标题】如何使用 http 解决 VUE 中的 CORS 问题？

【英文标题】：How can I resolve problem CORS in VUE using http?

【发布时间】：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 我编辑了帖子并添加了图片。

【参考方案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);