正向代理
这种经常应用于本地生产环境中
vue、react项目的运行需要nodejs环境,用此环境可以做一个代理服务器,也就是中间层
在请求发送(接收)之前加入中间层,将不同的域名转换成相同的,就解决了跨域的问题。客户端发送请求时,不直接到服务器,而是先到代理的中间层,利用中间者去代理
1、浏览器向中间者发送请求
2、中间者把请求给到服务器
3、服务器发送结果给中间者
4、中间者发送结果给浏览器
实现代码
使用建议及常见问题见最下方
开发环境(本地运行项目)
假设接口域名为www.fuwuqi.cn
使用
对于不同配置的使用是一样的,建议先看一下下面的常见问题在制作
axios({url:'/api/register', //最终相当于https://www.fuwuqi.cn/api/register// 其他配置项不在展示).then(function (res) {console.log(res);
})
重启项目
vue-cli 4之后项目
需要新建vue.config.js 【默认情况下,4以上的版本可以直接识别这个js文件,把它当做自己的配置文件】
步骤如下:
1、在项目框架的根目录下新建文件:vue.config.js
2、给新建的文件内添加解决跨域的代码部分
module.exports = {devServer: {proxy: {'/api': {target: 'https://域名/api',// API服务器的地址ws: true, //代理websocketschangeOrigin: true, // 虚拟的站点需要更管originpathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc''^/api': ''}}}}
}
重启项目,这样的话新建的文件就可以被识别了,一定要重启