axios 请求头配置
- X-Requested-With
"X-Requested-With": "XMLHttpRequest"
// request.getHeader(“x-requested-with”); 为 null,则为传统同步请求,
// 为 XMLHttpRequest,则为 Ajax 异步请求。
- withCredentials
withCredentials: true
- 开启withCredentials后,服务器才能拿到你的cookie,当然后端服务器也要设置允许你获取你开启了才有用
如果前端配置了这个withCredentials=true,后端设置Access-Control-Allow-Origin不能为 " * ",必须是你的源地址啊 否则简单的post请求却得不到返回值,会报“跨域 ”
后端需要设下如下
header("Access-Control-Allow-Origin","源地址";
header("Access-Control-Allow-Credentials", "true");
- axios.defaults.withCredentials时一直都是false;导致每次请求后端获取到的sessionId都是新的,无法使用session进行业务操作。
axios 注意事项
- service.interceptors.request.use( (config) => { config.headers = {} })会导致request方法里传入的headers 对象被覆盖不生效
withCredentials和Access-Control-Allow-Credentials
withCredentials
该XMLHttpRequest.withCredentials属性是一个布尔值,指示是否Access-Control应使用 cookie、授权标头或 TLS 客户端证书等凭据进行跨站点请求。设置withCredentials对同站点请求没有影响。
此外,此标志还用于指示何时在响应中忽略 cookie。默认值为false. XMLHttpRequest来自不同域的 cookie 不能为自己的域设置 cookie 值,除非在发出请求之前withCredentials设置为。true通过设置为 true 获得的第三方 cookiewithCredentials仍将遵循同源策略,因此请求脚本无法通过document.cookie或从响应标头访问。
Access-Control-Allow-Credentials
Access-Control-Allow-Credentials 响应头用于在请求要求包含 credentials
(Request.credentials 的值为 include)时,告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。
当请求的 credentials 模式(Request.credentials)为 include
时,浏览器仅在响应标头 Access-Control-Allow-Credentials 的值为 true 的情况下将响应暴露给前端的 JavaScript 代码。
Credentials 可以是 cookies、authorization headers 或 TLS client certificates。
当作为对预检请求的响应的一部分时,这能表示是否真正的请求可以使用 credentials。注意简单的GET 请求没有预检,所以若一个对资源的请求带了 credentials,如果这个响应头没有随资源返回,响应就会被浏览器忽视,不会返回到 web 内容。
Access-Control-Allow-Credentials 标头需要与 XMLHttpRequest.withCredentials 或 Fetch API 的 Request() 构造函数中的 credentials 选项结合使用。Credentials 必须在前后端都被配置(即 Access-Control-Allow-Credentials header 和 XHR 或 Fetch request 中都要配置)才能使带 credentials 的 CORS 请求成功。
后端设置好了responseType ,请求发送时候为啥还要设置responseType
通过 设置responseType 我可以告诉 axios/fetch/xhr 如何解析服务器返回的数据