记前端跨域请求踩坑记

今天在做Springboot +vue+axios时发送了跨域请求发现报记前端跨域踩坑，报Access to XMLHttpRequest at 'http://localhost:7050/runtime/uav/bookmark/photo/1' from origin 'http://192.168.1.112:8816' 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注释掉