CROS跨域遇到的问题
后台配置好 Access-Control-Allow-Origin :*
之后 谷歌浏览器Network中还是显示 CROS ERROR, 鼠标放上去显示 Cross-Origin Resource Sharing error: PreflightWildcardOriginNotAllowed
原因
在CORS中,Credential不接受http响应首部中的‘Access-Control-Allow-Origin’设置为通配符‘*’
解决方案
CORS 请求发出时,已经设定了credentials,但服务端配置了http响应首部 Access-Control-Allow-Origin
的值为通配符 ("*"
) ,而这与使用credentials相悖。
要在客户端改正这个问题,只需要确保发出 CORS 请求时将credential设置为false。
- 如果使用
XMLHttpRequest
发出请求,确保未将withCredentials
设置为true。
- 如果使用 Server-sent events, 确保
EventSource.withCredentials
的值为false
(false为默认值)。 - 如果使用 Fetch API,确保
Request.credentials
的值为"omit"
.
如果还不成功,则需要修改服务端,可能需要修改 Access-Control-Allow-Origin
的值,来为客户端所能够加载资源的源予以授权。
这里博主使用的是将
withCredentials
设置为false
。因为是vue的项目 axios进行了二次封装, 修改了default属性
axios.defaults.withCredentials = true;
在发送请求跨域请求的时候手动指定
withCredentials
为 false如下例子
import axios from 'axios' axios({ method: 'post', url: 'https://cros.aa.com/list', data: qs.stringify({ accessToken: token, pageSize: 50 }), withCredentials: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })