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

 

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()注释居然可以调用成功了!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当你在uni-app中进行跨域请求时,有时会遇到CORS(跨域资源共享)的问题,错误提示为"has been blocked by CORS policy: Response to preflight request"。这是因为浏览器在进行跨域请求时会发送一个预检请求(preflight request)来检查服务器是否允许该跨域请求。 要解决这个问题,你可以尝试以下几种方法: 1. 后端配置CORS:在后端接口的响应头中添加相应的CORS头信息,例如允许特定的来源、请求方法和头部信息等。具体配置方法取决于后端框架,你可以参考后端框架的文档来进行相应的配置。 2. 使用代理:在开发环境中,可以通过配置devServer的proxy选项来代理请求,将请求发送到同一域名下的接口。这样可以避免跨域问题。在vue.config.js文件中添加类似以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 目标地址 changeOrigin: true, // 是否改变请求源地址 pathRewrite: { '^/api': '' // 路径重写,将/api替换为空字符串 } } } } } ``` 以上代码表示将以`/api`开头的请求转发到`http://example.com`,实际请求时会自动将`/api`替换为空字符串。 3. JSONP:如果后端接口支持JSONP,则可以使用JSONP进行跨域请求。uni-app中可以使用vue-jsonp插件来实现JSONP请求。 请根据你的实际情况选择适合的方法来解决该问题。如果问题仍然存在,请检查后端接口的CORS配置是否正确,并确保请求的URL、请求方法和头部信息等是否符合后端的要求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值