最近遇到了前端跨域之withCredentials

问题描述：vue 本地开发环境是通过axios直接请求后台，生产环境采用nginx代理；今天本地开发被跨域请求的问题困扰了很久，

问题现象：

这次后台项目采用springcloudaliba gateway微服务。如果是html直接访问这个微服务，可以访问。但是如果通过网关微服务，来路由转发就不能访问。但是浏览器和Postman通过网关微服务都能访问，就是html不能通过网关访问

网上一大堆跨域，gateway vue axios跨域，自己也病急乱投医，各种试错，当看到https://segmentfault.com/q/1010000016904795 这兄弟总结5种解决方案别人也留言亲测可用，暗喜这下肯定搞定无疑，当shithappens的时候，觉得可能自己gateway代码有问题，因为是半拉子前端，是需要对知识采取负责任态度进行俯首甘为子牛吧，理解其概念，有时间不要留技术债了

跨域一句话的理解就是：服务端和请求端的地址不一样。

跨域的详细介绍可以参考：浏览器和服务器实现跨域(CORS)判定的原理（https://blog.csdn.net/zmx729618/article/details/53319383），这里不多赘述。

 axios里面有一个配置项，遗传代码withCredentials,就是它之前设置true，本地设置要设置false,就解决跨域，也是看到下面这博客，才蒙然觉醒 这个设置啥意思，以后不懂的知识点一定要及时baidu/google弄清楚，记一次

vue项目中axios请求数据的时候请求失败，出现跨域问题。

withCredentials 属性

CORS请求默认不发送Cookie和HTTP认证信息。但是有的后台要把Cookie发到服务器，要服务器同意，指定Access-Control-Allow-Credentials字段。

在axios的配置文件中配置withCredentials属性，默认带cookie给后台，

import Axios from 'axios';

Axios.defaults.withCredentials=true;
————————————————
原文链接：https://blog.csdn.net/Zxiuping/article/details/102835425。

最后还是学习下“配置项解析”

配置服务器实现跨域传输

前面讲到了同源策略的基本判定，以及浏览器实现跨域判断的方式，那么，如何在服务器端做配置来允许跨域传输呢？下文将以Nginx为例，讲一下三种情况下的配置。

配置项解析

CORS常用的配置项有以下几个：

• Access-Control-Allow-Origin（必含） – 允许的域名，只能填通配符或者单域名

• Access-Control-Allow-Methods（必含） – 这允许跨域请求的http方法（常见有POST、GET、OPTIONS）

• Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。

• Access-Control-Allow-Credentials（可选） – 该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。如果不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则导致请求失败。

• Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。

有点闷闷的