withCredentials

今天接了个需求，需要调用到外部的接口。
内容很简单，成功部署到开发环境之后验证也没问题。
于是信心满满的就上准环境让测试验证，然后提包包下班咯。

问题排查

然后没过十分钟测试一个消息@过来

啊这？
开发环境是好的啊！（o((⊙﹏⊙))o：得加班了）
加班一个多小时之后o(╥﹏╥)o
我终于锁定了问题原因——withCredentials( Ĭ ^ Ĭ )


当时的报错长这样：

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.

一看就是个“跨域”对吧！但是我们实际开发中这种都是后端去配置下就行了，问题来了！
1.这个外部接口不属于我们，也就是说我们改不了。
2.其次这个接口很多地方都有调用，但没听说过有什么地方有这个问题，然后开发环境也正常。

所以转变方向，问题应该是出在我们这边。
于是我比较了开发环境的请求头和准环境的请求头，发现多了些身份信息，同时多了“withCredentials”且为true。

withCredentials使用说明

于是立马去搜索了一波：（我觉得讲的比较好的一章）

转载自：axios 中配置withCredentials_deardanyang的博客-CSDN博客_axios withcredentials
到这里内鬼基本是抓到了，再去看看项目里面也配置了，这时这个解决方案就很清晰，改成默认值即可。 （提一嘴：同域情况下这个属性效果是相同的，所以改了的话一般业务接口并不会受影响，因为通常业务接口都是同域的）

开始填坑

由于这个配置比我还老，直接改成false肯定是不行的。
分分钟出现一堆始料未及的问题！！！
所以加个拦截器就行

axios.interceptors.request.use(
    function (config) {
        // 可以维护个表好一点
        if(config.url && config.url.includes('有问题的接口')) {
            config.withCredentials = false
        } 
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

到这里就基本上搞定了，最后的效果也很不错！
我也可以下班回家咯(◍´꒳`◍)，下次见！