一般情况下,后端负责解决跨域问题,然而有的时候特别是请求第3方接口时,后端人员无法协调,那么就需要前端自己来解决跨域问题了,以下就是详细步骤。(听说有很多种方案,但是因为本人是菜鸟所以只学会1种,还得记在小本本上 防止下次有需要的时候忘记)
总共需要修改2个文件(此处以stock项目为例,stock文件夹就是项目文件夹的根目录)
1、stock/config/index.js 里面加入以下代码 (这里可以复制文本)
proxyTable: {
'/api': {
target: 'https://www.xxx.cn/',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '',//重写,
}
}
},
以上这段代码加到stock/config/index.js里面,具体位置如下图:
2、在请求接口的代码里面这样写:
async getData() {
let p = 'rp=50';
let res = await this.$post('http://localhost:8080/api/data/list',p);
console.log('test 得到的 res ---', res);
},
以上代码中最重要的部分是请求地址的域名部分,请记得一定要写自己前端项目的域名而不是接口地址的域名!!!请记得一定要写自己前端项目的域名而不是接口地址的域名!!!请记得一定要写自己前端项目的域名而不是接口地址的域名!!!
代码解析如下图: