axios中cookie跨域及相关配置示例详解

自从入了vue之后，一直在用axios这个库来做一些异步请求，下面这篇文章主要介绍关于axios中cookie跨域及相关配置的资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴。

前言

最近在跨域、及请求头携带cookie上遇到了一些小问题，做个简单的探索和总结。本文主要介绍了axios中cookie跨域及相关配置的相关内容，下面话不多说，来一起看看详细的介绍吧。

1.带cookie请求 - 画个重点

axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials:true来解决，这个时候需要注意需要后端配合设置:
header信息Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin不可以为 ‘ * ’，因为 “ * ” 会和Access-Control-Allow-Credentials冲突，需要配置指定的地址，如果后端设置Access-Control-Allow-Origin : ' * ' 会有如下报错

Failed to load http://localhost:8090/category/lists: 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'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

后端配置缺一不可，否则会报错，贴上后端代码：

成功之后，可在请求中看到。

2、我的前端项目代码的axios配置

axios统一配置，会很好的提升效率，避免bug，以及定位出bug所在（方便捕获到error信息）建立一个单独的fetch.js邓庄的axios请求并作为方法暴露出来

如图所示，如果需要调用ajax请求

以上是统一添加header，还有一种是分别给单个接口添加header。即代码中添加

login组件中的设置，注意这里是post请求，withCredentials对象作为第三个参数设置。其他服务端的设置跟上边介绍的一致。

总结一下，如果想使用axios的widthCredentials来传递cookie，需要一下步骤：
1.  在axios请求的参数中，写入对象属性widthCredentials:true;
2. 服务器端响应头消息中的 Access-Control-Allow-Origin 不能设置为 ‘ * ’号，需要改成具体的IP地址；
3. 服务器端响应头消息中必须设置 Access-Control-Allow-Credentials : true.

PS

axios跨域请求应该请求两次，第一次请求道服务端，请求的类型是OPTIONS，

如果服务端解决了跨域请求，后端服务器应该在返回头里加上以下几个参数

如果还是只有一次请求的话，可以尝试修改Content-type的值。

网上有意见说，解决axios跨域请求两次的问题的话，只需要设置 Acces-Control-Max-Age，设置与检验的有效期，在有效期内不再进行预。该方式还没有经过验证。也希望看到这篇文章的道友，如果尝试过，请留言告诉我结果。

关于CORS相关的详细了解，可参考我的下一篇文章（跨域资源共享Cross-Origin resouses sharing）：https://www.jianshu.com/writer#/notebooks/20757449/notes/40143035