美文网首页
uni.request H5解决跨域问题的两种方案

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

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-10-11 11:55 被阅读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,其实除了它,还有与之相关的更多字段,它们也起到了更多的个性定值效果。下面进行了详细介绍。


相关文章

  • 【uni-app填坑】H5跨域请求问题的解决办法

    uni-app官方推荐方案:Chrome 调试跨域问题解决方案 uni.request的官方介绍:https://...

  • uniapp使用uni.request()API发起接口请求时:

    首先需明确uni.request不支持使用 jsonp 方案去解决跨域问题。 最直接的解决办法就是:在uni-ap...

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • 跨域解决方案(史上最易懂)

    跨域总结 1.跨域思路 跨域解决方案一般分为两种:前端解决,后端解决 1.1 前端解决方案 通过前端解决的思想就是...

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

    方法一:配置代理 在根目录下面找到manifest.json,添加如下代码 "h5": { "devServer"...

  • 开发环境跨域和生产环境跨域

    开发环境跨域 前后端分离,IP地址不同,请求数据必然导致跨域问题;解决方案:proxy设置 生产环境跨域 解决方案...

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • JWT简记

    JSON Web Token(JWT)是目前最流行的跨域认证解决方案。 跨域认证问题及传统解决方案 传统认证流程 ...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 跨域解决方案

    在讲解决跨域解决方案之前,我们需要了解什么是跨域,在什么情况下会跨域,跨域解决的是什么问题? 一、跨域,是指浏览器...

网友评论

      本文标题:uni.request H5解决跨域问题的两种方案

      本文链接:https://www.haomeiwen.com/subject/bbgoartx.html