uni.request H5解决跨域问题的两种方案

2022-10-11  本文已影响0人  扶得一人醉如苏沐晨

方法一:配置代理 

在根目录下面找到manifest.json,添加如下代码


"h5": {

"devServer": {

"port": 80,

"disableHostCheck": true,

"proxy": {

"/api": {

"target": "http://192.168.0.13:9999",

"changeOrigin": true,

"secure": false,

"pathRewrite": {

"^/api": ""

}

}

}

}

},

在封装的uni.request中,url前面拼上前缀 '/api",这样就可以拦截所有以/api开头的请求,然后走代理

记得重启项目

 方法二:直接在header中设置允许跨域的地址

通过Access-Control-Allow-Origin响应头,就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的"源",则不要拦截此响应,允许数据通行。比如说下面示列了一个场景:

由于浏览器检测到 http://example2.com 的响应头中显示的写着:Access-Control-Allow-Origin: http://example.com,也就是,如果请求数据的源是 http://example.com 则可以允许访问返回的数据。这样浏览器就不会抛出错误提示,而是正确的将数据交给你的ajax回调。

在这个过程中跨域也存在,但跨域并没有导致问题了。因为后端的响应充分考虑到了某个页面源要使用这个资源,早就帮对方做好了跨域资源共享。这才可以顺利的进行对接。

所以,要最简单解决跨域导致的问题,只需要后端响应时,在响应头里指定允许调用资源的源就可以了。除了设定指定的源以外,你还可以直接写一个*号,这样就表示:此数据允许被任何其他的源进行获取。

现在,你了解了Access-Control-Allow-Origin,其实除了它,还有与之相关的更多字段,它们也起到了更多的个性定值效果。下面进行了详细介绍。


上一篇 下一篇

猜你喜欢

热点阅读