uniapp 解决H5跨域的问题

快来打我* 2021-07-25 12:00 1528阅读 0赞

# uniapp 解决h5跨域问题 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

### manifest.json ###

manifest.json文件中，点击“源码视图”,在此对象的最后添加以下代码：

"h5" : { 
        "devServer" : { 
             "port" : 8080, //端口号
              "disableHostCheck" : true,
              "proxy" : { 
                  "/api" : { 
                      "target" : "请求的url地址前缀", //目标接口域名
                       "changeOrigin" : true,  //是否跨域
                       "secure" : true,  // 设置支持https协议的代理
    				    "pathRewrite": {   
    					   "^/api": ""  
    				   }  
                 }
            }
        }
    }

意思就是用"/api"代替 baseUrl，baseUrl就是基本url路径的意思。

**request.js请求数据的页面中，如果是写的baseUrl都要用“/api”来代替之前的baseUrl地址。**

此时，页面请求数据，从报错信息"cros cross origin跨域"变成了"304",此时也是可以获取到数据的，但是"304"的代码状态也是不对的，这个报“304”的原因是因为缓存。重新编译后就可以了。

# 小程序请求数据 #

小程序请求数据，需要在：  
**开发**中**开发设置**中的服务器域名中添加 baseUrl基本url路径即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/609046bfdaac40768c5b017f12bad34f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1528人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)

批量上传图片到云端流程： 1.uni.chooseImage选择图片，返回图片临时路径 2.根据图片临时路径数量，循环调用uniCloud.uploadFile

逃离我推掉我的手/ 2024年04月08日 12:12/ 0 赞/ 102 阅读

相关 uniapp跨域问题解决办法

uniapp跨域问题解决办法简介：本文讲解如何解决uniapp和springboot结合时候的的跨域问题。对于uniapp 编辑manifest.json文件

怼烎@/ 2024年03月22日 16:43/ 0 赞/ 87 阅读

相关 uniapp跨域问题解决

一、什么是跨域出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。知识点：跨域只会

迷南。/ 2023年10月11日 22:01/ 0 赞/ 83 阅读

相关解决uni-app在H5端的跨域问题

问题报错截图：这是常见的前端浏览器跨域问题了 ![在这里插入图片描述][2020123114473645.png] 解决方法修改 `manifest.json`

一时失言乱红尘/ 2023年01月01日 04:49/ 0 赞/ 183 阅读

相关 uniapp 跨域

manifest.json配置即可 "h5": { "devServer": { "por

朴灿烈づ我的快乐病毒、/ 2022年12月27日 15:27/ 0 赞/ 284 阅读

相关 uniapp之h5反向代理设置踩坑，解决跨域问题(超详解)

我直接来看流程吧第一步: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

悠悠/ 2022年12月26日 11:17/ 0 赞/ 448 阅读

相关 *uni-app之H5端跨域问题解决方案

场景：跨域问题只存在于浏览器端，App和小程序不存在跨域问题。产生原因：由于uni-app是标准的前后端分离模式开发h5应用时如果前端代码和后端接口没有部署在同域服

太过爱你忘了你带给我的痛/ 2022年11月12日 02:57/ 0 赞/ 1762 阅读

相关 H5跨域请求

跨域请求有多种方案，就说说比较简单的几种方案吧 -------------------- 解决方案1：也是比较简单直白的一种方式：利用Google Chrome

待我称王封你为后i/ 2022年08月20日 05:21/ 0 赞/ 231 阅读

相关 jsonp跨域问题h5

过滤器CrossFilter.java import java.io.IOException; import javax.servlet.F

柔光的暖阳◎/ 2022年06月12日 10:08/ 0 赞/ 213 阅读

相关 uniapp 解决H5跨域的问题

uniapp 解决h5跨域问题 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

快来打我*/ 2021年07月25日 12:00/ 0 赞/ 1529 阅读