javascript - Axios - 跨域 cookie

Question

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

我正在尝试使用带有 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,
}