Set-Cookie无法在浏览器中运行,但可与Postman配合使用

Question

前端位于localhost:4200,后端位于localhost:8080

我在后端和前端实现了CORS配置,所有其他API请求都可以工作.但是,Set-Cookie标志不会在我的浏览器中创建cookie.

我甚至在chrome中禁用了CORS.

当我使用Postman发出POST请求时,我正确地在Cookie选项卡中看到Cookie.我没有在网络浏览器中看到cookie.

选项请求

Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type,credentials

选项回应

X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Access-Control-Allow-Origin: http://localhost:4200
access-control-allow-credentials: true
access-control-allow-methods: POST, GET, OPTIONS, DELETE
access-control-max-age: 3600
access-control-allow-headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, credentials
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
Content-Length: 0
Date: Fri, 30 Jun 2017 14:55:58 GMT

POST请求

Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:4200/login
Content-Type: application/json
credentials: true
Content-Length: 48
Origin: http://localhost:4200
Connection: keep-alive

POST响应

X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Access-Control-Allow-Origin: http://localhost:4200
access-control-allow-credentials: true
access-control-allow-methods: POST, GET, OPTIONS, DELETE
access-control-max-age: 3600
access-control-allow-headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, credentials
Set-Cookie: ddd=eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjJmYXhhcyIsImV4cCI6MTQ5ODkyMDk1OH0.sKJLH1GvgbJP28ws2EOZpc8EH0SElB4VQX86m59G8BjT-QAaRW6sInnrF6Y_yNJcIEcrrw_itb-O26KkKza8aA
Content-Length: 0
Date: Fri, 30 Jun 2017 14:55:58 GMT

Answer 1

为了能够在这种情况下设置 cookie，您必须允许所有请求从过滤器传递，因为根据此问题OPTIONS，它们不包含 cookie ，更重要的是，当从服务器选项请求 cookie 时，必须将两者设置为 true服务器端和客户端。永远不要忘记在服务器上启用 CORS 请求（您必须定义来源，例如，使用通配符将不起作用）希望这可以帮助任何寻找此问题答案的人。withCredentialslocalhost:4200*

Answer 2

对我有用的方法与 @Josueemx 类似，但没有明确将附加的 http 方法设置到原始区域。

我所做的只是将凭据添加到请求配置中，下面是一个示例

const config = {
headers: {
  "Content-Type": "application/json"
  },
  withCredentials: true
}

然后将其添加到 axios.post('host',SomeDataHere, config)

然后按照 MrMisery 的建议，使用 cors 的凭据设置确切的来源。一个例子可以是。

app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true,
}));