uni-app运行到浏览器跨域H5页面的跨域问题解决方案

黄文娟 發表於 2020-5-26 13:16:00

uni-app运行到浏览器跨域H5页面的跨域问题解决方案

<h1>官方文档对跨域的解决方案推荐：</h1>
<p><strong>https://ask.dcloud.net.cn/article/35267</strong></p>
<div>
<h1 class="heading" data-id="heading-3">更方便的解决方案</h1>
<p> </p>
<p>项目根目录直接创建一个vue.config.js文件，并在里面配置代理，直接上代码</p>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:false;">module.exports = {
publicPath: './',
devServer: {
proxy: {
   '/api': {
   target: 'https://movie.douban.com',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
      '^/api': ''
   }
   },
   '/bpi': {
   target: 'https://douban.uieee.com/',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
      '^/bpi': ''
   }
   }
}
},
pwa: {
iconPaths: {
   favicon32: 'favicon.ico',
   favicon16: 'favicon.ico',
   appleTouchIcon: 'favicon.ico',
   maskIcon: 'favicon.ico',
   msTileImage: 'favicon.ico'
}
}
}
</pre>
</div>
<p>　　</p>
<p>在相关接口请求处的代码出做修改、如下：</p>
<p><strong>源代码：</strong></p>
<p><img src="https://img2020.cnblogs.com/blog/1669498/202005/1669498-20200526120642839-1877330304.png" alt=""></p>
<p> </p>
<p><strong>修改后：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">url: 'bpi/v2/movie/top250',
</pre>
</div>
<p>　</p>
<p>这时候跨域问题就解决了，但是会出现另外一个问题<strong>图片无法显示报403</strong>，这个问题通过添加自定义meta标签可以解决，</p>
<h1>图片403问题</h1>
<p><strong>但是怎么在uni-app里面添加自定义的meta标签呢，~</strong></p>
<p> </p>
<h3>1.在项目根目录下新建一个html文件；</h3>
<h3>2. 复制下面的基本模板内容，到这个html文件，</h3>
<h3>3.在此基础上修改meta和引入js；</h3>
<p> </p>
<p><strong>标准uni-app的模板：</strong></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>　　　　<br>　　　　　<meta name="referrer" content="no-referrer">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>
         <%= htmlWebpackPlugin.options.title %>
   </title>
   <script>
         document.addEventListener('DOMContentLoaded', function() {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
         })
   </script>
   <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
   <noscript>
         <strong>Please enable JavaScript to continue.</strong>
   </noscript>
   <div id="app"></div>
   
</body>
</html>
</pre>
</div>
<p>　　</p>
<p>找到新建html文件的heade处：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><meta name="referrer" content="no-referrer" />
</pre>
</div>
<p>　</p>
<h3><strong>4.在 <code>manifest.json->h5->template</code> 节点中关联这个html文件的路径。找到设置，把刚才自定义的文件引入</strong></h3>
<p> </p>
<p><img src="https://img2020.cnblogs.com/blog/1669498/202005/1669498-20200526125022267-243635224.png" alt=""></p>
<p> </p>
<p>　</p>
<p>这样所有的uni-app的跨域问题就迎刃而解了</p>
<p> </p>
<p> </p>
</div>
<h3>参考资料：</h3>
<p>webpack-dev-server<br>webpack跨域API</p>
<p> </p>
<h3 data-id="heading-5">如果大家有任何疑问即可留言反馈，会在第一时间回复反馈，谢谢大家！</h3>
<h3 data-id="heading-5">本人使用GSAP框架搭建的个人网站也上线啦！有兴趣可以访问 zhaohongcheng.com 查看，感谢~</h3>
<h3 data-id="heading-5">本人uni-app影视项目已经重磅开源，一套代码套发布到H5、APP、小程序等多个平台！有兴趣可以访问Dcloud官方插件市场https://ext.dcloud.net.cn/plugin?id=1839 查看，感谢~</h3>
<h3>本文为Tz张无忌文章，读后有收获可以请作者喝杯咖啡，转载请文章注明出处：https://www.cnblogs.com/zhaohongcheng/</h3>
<p> </p><br><br>
来源：https://www.cnblogs.com/zhaohongcheng/p/12964938.html

頁: [1]

琼殿技术论坛's Archiver

uni-app运行到浏览器跨域H5页面的跨域问题解决方案