uniapp打包h5后请求跨域问题

1.开发环境：

uniapp在开发环境中，官方建议是运行在内置浏览器，这样在开发过程中不会出现跨域问题；但是为了方便开发，我会习惯运行到外置浏览器，这时就出现跨域问题；

这时解决跨域有两种方案：

方案一：修改manifest.json，找到源码视图，添加设置devServer的proxy代理；

方案二：新增vue.config.js，内容如下：

module.exports = {
    devServer: {
        disableHostCheck: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8001',
                changeOrigin: true,
                secure: false,
                // ws: false,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

使用/api进行匹配，请求地址需要添加api前缀，然后pathRewrite重写路径去除前缀/api；

注意：manifest.json的devServer和vue.config.js不可同时存在，两者存在优先级，manifest.json的devServer会覆盖vue.config.js的配置

2.生产环境

当前端打包h5后还会出现跨域问题，此时vue.config.js设置或者manifest.json的devServer的proxy代理都会无效

这时就需要对服务器做代理配置，我用的是nginx代理

注意：proxy_pass表示要代理到的服务器域名，使用Nginx做反向代理并去除前缀

找到nginx的nginx.conf文件，主要的编辑内容如下：

server {
        listen       8080;
        server_name  localhost;

        location /{
            root   html/h5;
            index  index.html index.htm;
        }
        location ^~/api/ {
            proxy_pass http://localhost:8001/;
        }
   }

^~/api/表示请求前缀是api的请求，proxy_pass最后加上/，就会把api去除，比如请求的地址是api/test，则代理发出的请求是http://localhost:8001/test

proxy_pass去前缀还有另一种方案，使用rewrite重写url

server {
  location ^~/api/ {
      rewrite ^/api/(.*)$ /$1 break;
      proxy_pass http://localhost:8001;
  }
}