uniapp实现跨域代理

1.普通情况下实现跨域代理 

1. 跨域代理一般是写在vue.config.js文件中，uniapp一般情况下是没有这个文件的，需要我们自己创建一个文件。

2. 在文件中添加以下内容：

3. module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://api.example.com',
           changeOrigin: true,
           pathRewrite: {
             '^/api': ''
           }
         }
       }
     }
   }
   

4. 将target字段设置为目标服务器的地址，这里以"http://api.example.com"为例。

5. 将changeOrigin字段设置为true，以便在请求头中添加Origin字段。

6. 如果需要，可以使用pathRewrite字段对请求路径进行重写。

7. 保存并关闭vue.config.js文件。

使用此配置后，所有以/api开头的请求（如/api/user）将被代理到http://api.example.com/user。

在开发环境中，启动项目后会自动使用配置的代理。当进行跨域请求时，Vue将自动将请求发送到代理服务器，然后代理服务器将请求转发到目标服务器，并将响应返回给Vue应用程序。

---

2.如果是环境变量的配置情况下实现跨域代理

环境变量一般为 .env 开头，示例：

(其中的 VUE_APP_BASE_URL 后天服务地址是可根据后端地址更换的)

const config = {
	host : '127.0.0.1',
	post : '8000',
	VUE_APP_BASE_API : '/search', //前缀
	// VUE_APP_BASE_URL: 'http://api.example.com', //后台查询服务地址
	VUE_APP_BASE_URL: 'http://192.9.200.19:8000', //后台查询服务地址
}

下面为动态配置 vue.config,js （我们也可以在devServer的target里面修改后台服务地址）

const host = process.uniEnv.host || '0.0.0.0'
const port = process.uniEnv.post ||  8000 // 端口

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    host: host,
    port: port,
    proxy: { 
      [process.uniEnv.VUE_APP_BASE_API]: {
		target: process.uniEnv.VUE_APP_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.uniEnv.VUE_APP_BASE_API]: '',
        }
      },
	  '/api': {
	    target: 'http://127.0.0.1:8080',
	    changeOrigin: true,
	    pathRewrite: {
	      '^/api': '',
	    }
	  },
    },
  },
}

• 为什么要在环境变量里面配置 host 和 port ，因为在 vue.config.js 里面代理的时候无论我怎么操作，后太服务地址都不会改变，因为在环境变量我来已经把后台服务地址写死了，导致无论我么如何配置都不会生效