Axios -跨域cookie

Question

我有两个应用程序(后端和前端)运行在本地计算机上(端口8080的前端- Vue应用程序，端口9000的后端- Scala应用程序)。

我试图使用带cookie的Axios将请求发送到后端，但只有在两个都运行在相同的域中时，它才能工作：

它正在工作(在API请求中存在cookie)：

后端地址：http://127.0.0.1:9000/api/systems

前端(浏览器)：http://127.0.0.1:8080

不工作(请求不包含cookie):

后端地址：http://127.0.0.1:9000/api/systems

前端(浏览器)：http://localhost:8080

我的前端代码片段有请求：

const BASE_URL = appConfig.API_URL + '/api';
axios.defaults.withCredentials = true;
axios.get(BASE_URL + '/systems');

我认为CORS配置正确：

play.filters.cors {
  allowedOrigins = ["http://localhost:8080", "http://127.0.0.1:8080"]
  supportsCredentials = true
  allowedHttpMethods = ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]
}

Answer 1

在后端试试这个：

const allowedOrigins = ['localhost',"http://localhost:8080", "http://127.0.0.1:8080","http://localhost:8080/"];
var corsOptions = {
  origin: function (origin, callback) {
    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
      console.log("------")
      console.log("origin",origin)
    }
  },
  credentials: true,
}

Answer 2

您需要在响应中设置标题：

Access-Control-Allow-Headers: Set-Cookie

在node.js上的特快专递中，它是这样的：

res.setHeader('Access-Control-Allow-Headers', 'Set-Cookie')