uni-app跨域

193 阅读1分钟

uni-app跨平台解决方案

什么是跨域

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。 A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号

跨域的问题

首先,在本地开发时,不同于直接用小程序IDE进行开发,在开发H5平台时,需要使用浏览器进行调试,而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面,同时这个页面会调一些现有的接口时,就面临着跨域的问题。

   需求:发起一个请求,接口获取轮播数据,并正常轮播
    写代码:直接请求服务器接口的时候
    

image.png 会发现控制台报错了,遇到问题不要慌,这个就是跨域的问题了,献出我的解决方案(供参考)

那么前端该怎么去解决跨域问题?

想到之前写vue项目的时候,遇到过一次是基于vue的,那么解决办法应该也是差不多的

解决方案

1:打开manifest.json文件,选择源码视图,在里面添加proxy代理

image.png

更方便的解决方案<

"devServer": {
        "proxy": {
          "/api": {
             "target": "http://vueshop.glbuys.com",(自己接口域名)
              "pathRewrite": {
                   "^/api": ""
              }
            }
     }
  }
  

请求成功返回的结果为:

p1-juejin.byteimg.com/tos-cn-i-k3… (返回的结果看自己的接口)

详细内容可打开链接

juejin.im/post/5e43b2…(详细)