Nuxt如何发起跨域资源请求?nuxt+vue+axios如何配置代理转发（nuxt.config.js）

背景：项目是用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"

  }线上同理。

如果帮到了您，记得给我点个小心心哦。