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

た入场券 2023-02-13 03:35 4阅读 0赞

# 官方文档对跨域的解决方案推荐： #

**[https://ask.dcloud.net.cn/article/35267][https_ask.dcloud.net.cn_article_35267]**

# 更方便的解决方案 #

项目根目录直接创建一个vue.config.js文件，并在里面配置代理，直接上代码

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'
        }
      }
    }

在相关接口请求处的代码出做修改、如下：

**源代码：**

![format_png][]

**修改后：**

url: 'bpi/v2/movie/top250',

这时候跨域问题就解决了，但是会出现另外一个问题**图片无法显示报403**，这个问题通过添加自定义meta标签可以解决，

# 图片403问题 #

**但是怎么在uni-app里面添加自定义的meta标签呢，~**

### 1.在项目根目录下新建一个html文件； ###

### 2. 复制下面的基本模板内容，到这个html文件， ###

### 3.在此基础上修改meta和引入js； ###

**标准uni-app的模板：**

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
    　　　　
    　　　　　<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>

找到新建html文件的heade处：

### **4.在 `manifest.json->h5->template` 节点中关联这个html文件的路径。找到设置，把刚才自定义的文件引入** ###

![format_png 1][]

这样所有的uni-app的跨域问题就迎刃而解了

### 参考资料： ###

[webpack-dev-server][]  
[webpack跨域API][webpack_API]

### 如果大家有任何疑问即可留言反馈，会在第一时间回复反馈，谢谢大家！ ###

### 本人使用GSAP框架搭建的个人网站也上线啦！有兴趣可以访问 [zhaohongcheng.com][] 查看，感谢~ ###

### 本人uni-app影视项目已经重磅开源，一套代码套发布到H5、APP、小程序等多个平台！有兴趣可以访问Dcloud官方插件市场[https://ext.dcloud.net.cn/plugin?id=1839][https_ext.dcloud.net.cn_plugin_id_1839] 查看，感谢~ ###

### 本文为Tz张无忌文章，读后有收获可以请作者喝杯咖啡，转载请文章注明出处：[https://www.cnblogs.com/zhaohongcheng/][https_www.cnblogs.com_zhaohongcheng] ###

[https_ask.dcloud.net.cn_article_35267]: https://ask.dcloud.net.cn/article/35267
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMTY2OTQ5OC8yMDIwMDUvMTY2OTQ5OC0yMDIwMDUyNjEyMDY0MjgzOS0xODc3MzMwMzA0LnBuZw?x-oss-process=image/format,png
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvMTY2OTQ5OC8yMDIwMDUvMTY2OTQ5OC0yMDIwMDUyNjEyNTAyMjI2Ny0yNDM2MzUyMjQucG5n?x-oss-process=image/format,png
[webpack-dev-server]: https://webpack.docschina.org/configuration/dev-server/
[webpack_API]: https://segmentfault.com/a/1190000016199721#articleHeader6
[zhaohongcheng.com]: https://www.zhaohongcheng.com/
[https_ext.dcloud.net.cn_plugin_id_1839]: https://ext.dcloud.net.cn/plugin?id=1839
[https_www.cnblogs.com_zhaohongcheng]: https://www.cnblogs.com/zhaohongcheng/