解决uni-app开发环境中H5端跨域问题
<h3><strong>此跨域问题只存在于浏览器端，App和小程序不存在跨域问题</strong></h3><p><strong>参考地址：</strong></p>
<p>manifest.json官方配置文档： https://uniapp.dcloud.io/collocation/manifest?id=devserver</p>
<p>Chrome 调试跨域问题解决方案之插件篇： https://ask.dcloud.net.cn/article/35267</p>
<p> 其实uni-app官方有解决跨域的办法，官方推荐使用HBuilderX中内置的浏览器去预览，在内置的浏览器中不会存在跨域问题，但是要是在Chrome 浏览器中预览的话就会出现这个跨域问题，官方推荐使用Allow-Control-Allow-Origin: *插件的方式去解决，但是我试过这个插件，不知道是什么问题，并没有效果，跨域问题依旧还是存在，后面再仔细的看了下文档，看到了下面的提示。</p>
<p><code>uni-app</code> 中 <code>manifest.json->h5->devServer</code> 实际上对应 <span style="color: rgba(255, 0, 0, 1)"><code>webpack</code> 的 <span style="color: rgba(255, 0, 0, 1)">devServer</span></span>，鉴于 manifest 为 json 文件，故 <code>webpack.config.js->devServer</code> 配置项下的简单类型属性均可在<code>manifest.json->h5->devServer</code>节点下配置，funciton 等复杂类型暂不支持。</p>
<p>所以我就在想是不是可以使用proxy配置反向代理的方式去实现跨域请求，代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> h5特有相关 </span><span style="color: rgba(0, 128, 0, 1)">*/</span>
"h5"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"devServer"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"port" : 8000, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">端口号</span>
"disableHostCheck" : <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"proxy"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"/api"<span style="color: rgba(0, 0, 0, 1)"> : {
</span>"target" : "https://xxx.xxxxx.cn", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">目标接口域名</span>
"changeOrigin" : <span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否跨域</span>
"secure" : <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 设置支持https协议的代理</span>
<span style="color: rgba(0, 0, 0, 1)"> }
}
}
}</span></pre>
</div>
<p>最后发现问题解决了。</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/PYiP/p/11244134.html
頁:
[1]