背景:项目是用Nuxt搭建的
描述:项目默认启动是运行在localhost:3000,这样子我们调用测试接口和线上接口时都要跨域,那么我们可以通过nuxt.config.js中的配置解决这个跨域问题。
首先安装@nuxtjs/proxy和@nuxtjs/proxy,我们在nuxt.config.js中可以定义一下自己用到的API接口地址作为公用变量,在proxy中进行转发。
const {
API_SERVER = 'http://youguolocal.testin.cn',
NODE_ENV = 'dev'
} = process.env;
module.exports = {
axios: {
proxy: true
},
proxy: {
'/dsp': {
target: API_SERVER,
onProxyRes (proxyRes) {
proxyRes.headers['content-type'] = 'application/json';
}
},
'/ssp': {
target: API_SERVER,
onProxyRes (proxyRes) {
proxyRes.headers['content-type'] = 'application/json';
}
}
}
}
这样当我们运行项目时,如果根目录中存在/ssp请求链接就会被转发到 API_SERVER(默认设置成了http://youguolocal.testin.cn),如果接口中没有/ssp路径,记得在proxy配置中写
pathRewrite: {
'^/ssp': '/' // rewrite path
}来重写路径。
那么在测试环境我们可能需要转发到测试环境的API,我们可以在启动测试环境时,将API_SERVER的值做相应改变,package.json文件中设置
"scripts": {
"dev:test": "cross-env API_SERVER=http://youguo.test.testin.cn DEBUG=NUXT:* nuxt dev"
}线上同理。
如果帮到了您,记得给我点个小心心哦。