转载：解决uniapp开发h5跨域问题

原文：https://juejin.im/post/6844904063855755271

背景

最近团队内部一直在试点用uni-app去做一些小需求，但主要是先在H5上做试点，之后再按计划编译成小程序去发布。这回分享几个遇到的小问题和解决方案。

下面说到的问题主要在用uni-app开发H5平台时才会遇到，非H5平台可忽略。

跨域的问题

首先，在本地开发时，不同于直接用小程序IDE进行开发，在开发H5平台时，需要使用浏览器进行调试，而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面，同时这个页面会调一些现有的接口时，就面临着跨域的问题。

官方的解决方案

uni-app官方介绍了一些解决跨域问题的方法，比如服务端开启CORS，给浏览器安装跨域插件等，详见uni-app的H5版使用注意事项。但里面并没有提到（应该是很久未更新文档导致）的是，如果不想这么麻烦去解决，还有个更方便的办法，也就是用webpack-dev-server去代理即可解决。

更方便的解决方案

根据官方文档的描述，devServer配置被要求在manifest.json去配置，并且由于这个配置文件是json格式的，所以只能对简单类型进行配置。但对于proxy这项配置来说也是足够了的。直接如下方式配置即可解决:

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

另一种解决方案

直接创建一个vue.config.js文件，并在里面配置devServer，直接上代码

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

这种办法的好处显而易见，用js而非json去配置会更加的灵活，需要注意的是以上两种方案不能同时使用，第一种会覆盖第二种方案。