背景:項目是用Nuxt搭建的
描述:項目默認啟動是運行在localhost:3000,這樣子我們調用測試接口和線上接口時都要跨域姨蝴,那么我們可以通過nuxt.config.js中的配置解決這個跨域問題。
首先安裝@nuxtjs/proxy和@nuxtjs/proxy猖败,我們在nuxt.config.js中可以定義一下自己用到的API接口地址作為公用變量,在proxy中進行轉發(fā)。
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請求鏈接就會被轉發(fā)到?API_SERVER(默認設置成了http://youguolocal.testin.cn)蛤袒,如果接口中沒有/ssp路徑熄云,記得在proxy配置中寫
pathRewrite: {
? ? ? ? '^/ssp': '/' // rewrite path
?}來重寫路徑。
那么在測試環(huán)境我們可能需要轉發(fā)到測試環(huán)境的API,我們可以在啟動測試環(huán)境時妙真,將API_SERVER的值做相應改變缴允,package.json文件中設置
"scripts": {
? ? "dev:test": "cross-env API_SERVER=http://youguo.test.testin.cn DEBUG=NUXT:* nuxt dev"
??}線上同理。
如果幫到了您珍德,記得給我點個小心心哦练般。