uni-app 本地访问接口跨域
<p>uni-app在本地访问接口跨域，可进行如下配置：</p><p><span style="font-family: 宋体">需要在</span>manifest.json<span style="font-family: 宋体">的源码中找到</span><span style="font-family: Calibri">h5,</span><span style="font-family: 宋体">添加以下代码：</span></p>
<p> </p>
<div class="cnblogs_code">
<pre>"devServer"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"proxy"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"/dpc"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"target" : "****"<span style="color: rgba(0, 0, 0, 1)">, //域名
</span>"changeOrigin" : <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"secure" : <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"pathRewrite"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"^/dpc" : ""<span style="color: rgba(0, 0, 0, 1)">
}
}
},
</span>"https" : <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p> </p>
<p>其中</p>
<pre>target接口访问的域名</pre>
<pre>pathRewrite为接口重定向</pre>
<pre>https是否是https的<br><br>然后在请求接口的时候需要将/dcp/,重定向的路径加到访问接口的域名中；<br><br>如下https.js：</pre>
<div class="cnblogs_code">
<pre>const baseUrl = 'https://***'<span style="color: rgba(0, 0, 0, 1)">;//接口请求域名</span><span style="color: rgba(0, 0, 0, 1)">
const httpRequest </span>= (opts, data) =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> httpDefaultOpts =<span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">url: "/dpc/"+opts.url, //本地访问时开启</span>
// url: baseUrl+<span style="color: rgba(0, 0, 0, 1)">opts.url, //线上环境中开启
data: data,
beforeSend :</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(xmlHttp){
xmlHttp.setRequestHeader(</span>"If-Modified-Since","0"<span style="color: rgba(0, 0, 0, 1)">);
xmlHttp.setRequestHeader(</span>"Cache-Control","no-cache"<span style="color: rgba(0, 0, 0, 1)">);
},
method: opts.method,
header: opts.method </span>== 'GET' ?<span style="color: rgba(0, 0, 0, 1)"> {
</span>'X-Requested-With': 'XMLHttpRequest'<span style="color: rgba(0, 0, 0, 1)">,
</span>"Accept": "application/json"<span style="color: rgba(0, 0, 0, 1)">,
</span>"Content-Type": "application/json; charset=UTF-8"<span style="color: rgba(0, 0, 0, 1)">
} : {
</span>'content-type': 'application/x-www-form-urlencoded'<span style="color: rgba(0, 0, 0, 1)">
},
dataType: </span>'json'<span style="color: rgba(0, 0, 0, 1)">,
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> promise = <span style="color: rgba(0, 0, 255, 1)">new</span> Promise(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
resolve(res[</span>1<span style="color: rgba(0, 0, 0, 1)">])
}
).</span><span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)">(
(response) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
reject(response)
}
)
})
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> promise
};
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
baseUrl,
httpRequest,
}</span></pre>
</div>
<p>在本地浏览器中，接口地址为 url: "/dpc/"+opts.url,</p>
<p>在线上访问时，需要将接口地址切换回来 url: baseUrl+opts.url,</p>
<pre>https.js在main.js中全局配置后就可以在整个项目中使用；<br><br>如下图，访问出的接口地址是</pre>
<p><img src="https://img2020.cnblogs.com/blog/1050638/202009/1050638-20200927162136329-467950151.png"></p>
<p>请求地址会变成 https://localhost:8080/dpc/*****</p>
<p>而请求的状态是成功；</p>
<p>至此成功解决uni-app本地接口访问跨域的问题；</p>
<p>啦</p>
<p>啦啦</p>
<p>啦啦啦</p>
<p>啦啦啦啦啦</p>
<p> </p>
<p> </p>
<p>有问题可以留言</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/yeziyou/p/13740269.html
頁:
[1]