【uniapp】uni.request请求跨域问题解决方案

例如，运行H5页面，请求一个地址资源，如果不是本站地址，浏览器就会报跨域错误，这样访问受限

问题呈现

例如，项目代码里是这样写的，运行H5测试

uni.request({url:'https://gitcode.net/zs1028/stat...ouces_2023/-/...',success(res){
        console.log(res)},fail(err){
        console.error(err)}})

因为

https://gitcode.net

不是本站地址，根据浏览器同源策略，是会报跨域错误，

解决步骤

打开项目的

manifest.json

文件，以源码视图查看，添加以下代码

{//..."h5":{/* 跨域代理 */"devServer":{"port":5174,"disableHostCheck":true,"proxy":{"/zs1028":{"target":"https://gitcode.net","changeOrigin":true,"secure":false}}}},//...}

解释以下

• 属性port是本站的服务器访问IP对应端口号，如果是发布的网站，应该填80或者443
• 属性/zs1028是本地的访问接口，接口如果是/zs1028...这样，就会交给本地服务器代理访问

最后，改成以下代码，就能跨域访问了，实际上是代理访问

uni.request({url:'/zs1028/stat...ouces_2023/-/...',success(res){
        console.log(res)},fail(err){
        console.error(err)}})

对代理这一次陌生？第一次听说不要紧，来科普一下，

#mermaid-svg-cS2tfjfE092zZ5ba {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .error-icon{fill:#552222;}#mermaid-svg-cS2tfjfE092zZ5ba .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-cS2tfjfE092zZ5ba .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-cS2tfjfE092zZ5ba .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-cS2tfjfE092zZ5ba .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-cS2tfjfE092zZ5ba .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-cS2tfjfE092zZ5ba .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-cS2tfjfE092zZ5ba .marker{fill:#333333;stroke:#333333;}#mermaid-svg-cS2tfjfE092zZ5ba .marker.cross{stroke:#333333;}#mermaid-svg-cS2tfjfE092zZ5ba svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-cS2tfjfE092zZ5ba .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .cluster-label text{fill:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .cluster-label span{color:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .label text,#mermaid-svg-cS2tfjfE092zZ5ba span{fill:#333;color:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .node rect,#mermaid-svg-cS2tfjfE092zZ5ba .node circle,#mermaid-svg-cS2tfjfE092zZ5ba .node ellipse,#mermaid-svg-cS2tfjfE092zZ5ba .node polygon,#mermaid-svg-cS2tfjfE092zZ5ba .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-cS2tfjfE092zZ5ba .node .label{text-align:center;}#mermaid-svg-cS2tfjfE092zZ5ba .node.clickable{cursor:pointer;}#mermaid-svg-cS2tfjfE092zZ5ba .arrowheadPath{fill:#333333;}#mermaid-svg-cS2tfjfE092zZ5ba .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-cS2tfjfE092zZ5ba .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-cS2tfjfE092zZ5ba .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-cS2tfjfE092zZ5ba .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-cS2tfjfE092zZ5ba .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-cS2tfjfE092zZ5ba .cluster text{fill:#333;}#mermaid-svg-cS2tfjfE092zZ5ba .cluster span{color:#333;}#mermaid-svg-cS2tfjfE092zZ5ba div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-cS2tfjfE092zZ5ba :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
代理访问

直接访问

访问外部地址

失败

浏览器

本地站点-服务器

被拦截

外地站点

代理，比如生活中找来的中介差不多的意思