bug: https://aip.baidubce.com/oauth/2.0/token报错blocked by CORS policy

本文讲述了在Vue项目中遇到的跨域问题,特别是在调用百度云接口时,通过配置manifest.json的proxy来设置代理服务器,解决了Access-Control-Allow-Origin错误。作者还提供了完整的代码示例,涉及身份证识别功能.
摘要由CSDN通过智能技术生成

  • 还是跟以前一样,我们先看报错点:(注意小编这里是H5解决跨域的,不过解决跨域的原理都差不多)

Access to XMLHttpRequest at 'https://aip.baidubce.com/oauth/2.0/token' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

  •  很明显,上面有CORS,让我们想到了跨域的问题。
  • 前后端对接的时候跨域问题这么常见,小编为什么还要把这个问题拿出来再单独发一篇呢。该跨域问题是在调用百度云接口的时候出现的,在我们查看文档或者看别的人写的时候url也是直接写上去的,如下:(小编也是刚开始就直接使用了,所以导致我报错)
uni.request({
	url: 'https://aip.baidubce.com/oauth/2.0/token',
})
  • 那么解决的方法是什么呢:(配置代理服务器解决跨域) 

        -- manifest.json里的h5配置项如下配置:

"h5" : {
   "devServer" : {
       "port" : 8000,
       "disableHostCheck" : true,
       "proxy" : {
           "/baiduApi" : {
               "target" : "https://aip.baidubce.com", // 需要跨域的域名
               "changeOrigin" : true,
               "secure" : false,
               "pathRewrite" : {
                    "^/baiduApi" : ""
                }
           }
       }
   },
}

         -- 调用url处如下写:

uni.request({
	url: '/baiduApi/oauth/2.0/token',
})
  • 原理看小编该文章:

Vue中利用代理服务器解决跨域问题_vue代理跨域_❆VE❆的博客-CSDN博客

  • 完整代码

uniapp: 前端利用百度云OCR实现文字识别(身份证识别功能,别的功能类似)-CSDN博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值