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

Question

我使用Sails+Vue创建了这个项目，我会把这个项目分享到github上与其他人分享。

我有一个CORS的问题。

在后端()sails的安全代码是。

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))
  }
}

我希望得到解决这个问题的建议。谢谢大家

Answer 1

这是一个常见的问题。你的客户端运行在8080端口，而你的sails服务器运行在1337端口，这两个端口被认为是不同的域。

我通常建议大家在客户端使用代理，把所有的请求都代理到服务器上，这样就不会出现问题。由于Sails.js会话与cookies的工作方式，这一点特别有用。如果你使用的是webpack DevServer的话，这是一个简单的设置。这里是DevServers文档的链接--。代理.

---

如果你还想在这个域配置中修复CORS，你必须在服务器端这样做。在你的Sails.js应用根目录下进入编辑 config/security.js. 在那里你会看到一个CORS设置注释出来。它将看起来像这样。

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

把它改成允许你的客户端本地主机域名这样。

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

你可以恢复你的客户端的变化.

注意，你可能需要添加 withCredentials 选项，如果没有它，浏览器将不会发送任何cookie。

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