• 前端使用axios发起XHR请求时,设置了withCredentials为true这个请求头,发起了附带身份凭证的请求
axios.defaults.withCredentials = true; // `withCredentials` 表示跨域请求时是否需要使用凭证
  • withCredentials 在MDN中是这样解释的

Access-Control-Allow-Credentials 响应头表示是否可以将对请求的响应暴露给页面。返回true则可以,其他值均不可以。
Credentials可以是 cookies, authorization headers 或 TLS client certificates。
当作为对预检请求的响应的一部分时,这能表示是否真正的请求可以使用credentials。注意简单的GET 请求没有预检,所以若一个对资源的请求带了credentials,如果这个返回这个资源,响应就会被浏览器忽视,不会返回到web内容。
Access-Control-Allow-Credentials 头 工作中与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置(即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置)才能使带credentials的CORS请求成功。

——MDN

在 withCredentials的情况下,后端要设置Access-Control-Allow-Origin为你的源地址,例如http://localhost:8080,不能是*,而且还要设置header(‘Access-Control-Allow-Credentials: true’);

  • 在node.js中这样设置
res.setHeader("Access-Control-Allow-Origin", "http://localhost:8000");
res.setHeader("Access-Control-Allow-Credentials", "true");
  • 当然如果不发起带身份凭证的请求 ,前端将withCredentials设置成false或者不设置即可
  • 此时后端就可以将Access-Control-Allow-Origin设置为*
res.setHeader("Access-Control-Allow-Origin", "*");

Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。

对于不需具备凭证(credentials)的请求,服务器会以“*”作为通配符,从而允许所有域都具有访问资源的权限。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注