axios.defaults.withCredentials = true 前端跨域设置
程序员文章站
2022-12-04 20:50:33
登录之后的请求会带登录用户信息,需要把登录时的cookie设置到之后的请求头里面。而跨域请求要想带上cookie,必须要在vue的main.js里加上axios.defaults.withCredentials = true。withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization,headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。axi....
登录之后的请求会带登录用户信息,需要把登录时的cookie设置到之后的请求头里面。而跨域请求要想带上cookie,必须要在vue的main.js里加上axios.defaults.withCredentials = true。withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization,headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。
axios.defaults.withCredentials = true;//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
但是前端这样设置之后发现报错了!
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
原因是:前端设置withCredentials的情况下,后端要设置Access-Control-Allow-Origin为你的源地址,例如http://localhost:8080,不能是*,而且还要设置header(‘Access-Control-Allow-Credentials: true’);
另外,Access-Control-Allow-Origin设置为*,时cookie不会出现在http的请求头里,所以报错里说Access-Control-Allow-Origin不能是*。
本文地址:https://blog.csdn.net/xiaoyuer_2020/article/details/109000664
下一篇: CCF-消除类游戏 2015-12-2
推荐阅读
-
html5 postMessage前端跨域并前端监听的方法示例
-
用iframe设置代理解决ajax跨域请求问题
-
详解webpack-dev-server 设置反向代理解决跨域问题
-
关于Angularjs中跨域设置白名单问题
-
前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域
-
axios.defaults.withCredentials = true 前端跨域设置
-
Spring Boot设置支持跨域请求过程详解
-
Javascript实现跨域后台设置拦截的方法详解
-
后端处理前端跨域请求的方法
-
P3P 和 跨域 (cross-domain) cookie 访问(读取和设置)