天地图跨域问题解决(axios配置withCredentials遇到的坑)

在天地图注册并在页面中直接调用API报错跨域

最近接受前同事的项目,需要加一些地理编码的功能,在天地图注册并调用API时一直报错跨域:
报错如图

中间试了jsonp请求也不行,各种方法都没解决,最后重新建了一个全新的项目发现可以请求成功。我就纳了闷了。。。。最后发现是axios全局配置了withCredentials: true
天地图跨域问题解决(axios配置withCredentials遇到的坑)_第1张图片
晕死了啊晕死了啊,简直没天理,浪费了半天的时间!!!!

withCredentials的作用

withCredentials:表示跨域请求时是否需要使用凭证。
意思就是开启withCredentials后,服务器才能拿到你的cookie。但是一旦设置true以后,后端设置Access-Control-Allow-Origin不能为 " * ", 必须是你的源地址,而且必须设置header(‘Access-Control-Allow-Credentials: true’),如果不设置的话就是不允许携带cookie过去。
另外当后端Access-Control-Allow-Origin设置为 * 时cookie不会出现在http的请求头里,所以报错里会说Access-Control-Allow-Origin不能是*。

晕死了啊晕死了啊,因为这么点错浪费半天的时间!!!

你可能感兴趣的:(vue,天地图,axios,前端)