|
今天在做Springboot +vue+axios时发送了跨域请求发现报记前端跨域踩坑，报Access to XMLHttpRequest at 'http://localhost:7050/runtime/uav/bookmark/photo/1' from origin 'http://192.168.1.182:8088' 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.
翻译：?当请求凭证模式为“include”时，Access-Control-Allow-Origin这个响应头设置不能为通配符“*”，凭证模式通过XMLHttpRequest 对像的withCredentials 属性初始化。
?题外：withCredentials是xhr对象的一个属性。它的值是boolean。若为true，则执行跨域请求时在请求头中挟带凭据信息。否则不挟带。凭据信息包括cookie、http认证、客户端ssl……。常用cookie为凭据。
?????????? axios是基于（但不限于）xhr+promise做出来的。axios也有withCredentials属性。
原因：发送的是带有凭证的请求，但服务器没有包含这个头部，所以被浏览器拦截，所以在传传Cookie等务端的Access-Control-Allow-Origin必须配置具体的域名。
使用带有凭证的场景：开发环境，并且需要用到登录额cookie的
解决的方法：
1后端解决：
??? 1-1在后端的过滤器中设置请求头为具体的站点不用通配符，response.setHeader("Access-Control-Allow-Origin",?"允许访问的站点");
???? 1-2(推荐)，在后端的过滤器中设置请求头为自动获取当前请求的站点，response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
2.前端解决
?????检查Axsios的配置，把http://Axios.defaults.withCredentials = true注释掉
|