1.普通情况下实现跨域代理
- 跨域代理一般是写在vue.config.js文件中,uniapp一般情况下是没有这个文件的,需要我们自己创建一个文件。
-
在文件中添加以下内容:
-
module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }
-
将
target
字段设置为目标服务器的地址,这里以"http://api.example.com"为例。 -
将
changeOrigin
字段设置为true
,以便在请求头中添加Origin
字段。 -
如果需要,可以使用
pathRewrite
字段对请求路径进行重写。 -
保存并关闭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 里面代理的时候无论我怎么操作,后太服务地址都不会改变,因为在环境变量我来已经把后台服务地址写死了,导致无论我么如何配置都不会生效