后台配置Access-Control-Allow-Origin :*后依然被浏览器拦截

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'
  }
})

MDN地址