vue-element-admin has been blocked by CORS policy: Response to preflight request doesn‘t pass access

原创已于 2023-03-30 10:10:46 修改 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

于 2023-03-30 10:05:41 首次发布

vue 专栏收录该内容

59 篇文章

订阅专栏

在Vue应用中使用vue-element-admin框架时遇到CORS跨域问题，GET请求报错而POST请求正常。已尝试在request.js设置跨域，vue.config.js配置代理，以及在请求头添加no-cors，但问题仍未解决。最终发现注释掉request.js中X-Token的设置后，请求成功。这可能涉及到预检请求的Access-Control-Allow-Headers配置问题。

Access to XMLHttpRequest at 'http://xxx' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Google 翻译一下：

访问位于xxx 已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：它没有HTTP正常状态。

使用vue-element-admin框架时明明设置了跨域，post请求正常，get请求就报错。网上查了很多资料说是CORS 跨域限制以及预请求验证。

在请求后端时，已经被CORS策略阻止拦截：对于飞行请求的响应没有通过访问控制检查：在被预检请求的资源上没有被允许
需要在调用后，配置文件中的跨域请求头中添加“author”，即可解决预飞行请求错误
# 配置跨越请求头
CORS_ALLOW_HEADERS = (
'x-requested-with',
'content-type',
'token',
'authorization',
'author',
) 然而也没用。
————————————————

1. request.js 已设置跨域

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url 
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    Accept: 'application/json'
  }
})

2. vue.config.js设置proxy也没有用

3. user.js也试过加"no-cors"

export function getInfo(loginIdentifer) {
  return request({
    url: 'xxx/GetLoginInfo',
    method: 'get',
    // mode: 'no-cors',
    params: { loginIdentifer }
  })
}

尝试找一些请求头相关的，然后发现request.js 把config.headers['X-Token'] = getToken()注释居然可以调用成功了！