@nuxtjs/axios 模块如何配置跨域

Question

想跨域调用一个接口，按照官方文档, nuxt.config.js中配置如下：

  modules: ['@nuxtjs/axios'],
  axios: {
    proxy: true,
    baseURL: 'http://localhost:8000/api',
    // prefix: '/api', // it not work
    credentials: true,
  },
  proxy: {
    '/api/douban': {
      target: 'https://api.douban.com/v2/book/search',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

调用部分代码：

    async search({ commit, state }, data) {
      const res = await this.$axios.$get('/douban/book/search', { params: data });
      commit('SET_BOOK_QUERY', res);
      return res;
    },

但是不起作用，在http-proxy-middleware包中增加如下日志：

  function shouldProxy (context, req) {
    var path = (req.originalUrl || req.url)
    console.log('shouldProxy  path:', context, path);// 输出：shouldProxy  path: /api/douban /admin/tag
    return contextMatcher.match(context, path, req)
  }

说明配置确实被正确初始化了，问题是只有刷新页面进行服务端渲染时才有这个日志，这时的path是页面路由而不是api请求，而页面上的请求却没有被代理。
很奇怪，不知道是哪里配置有问题，请各路大神帮忙。

Answer 1

又仔细看了一遍nuxtjs/axios文档，才总算发现了一些问题，一个是prefix配置不是不起作用，而是在proxy enable时才有效，baseUrl是服务端渲染时走的url，如果配置了服务端渲染时就不会走proxy，browserBaseURL同理，因为有的跨域api会在服务端渲染调用，所以不能配置baseUrl, 所有api都需要走proxy，这也是官方文档里proxy开启时只有这一个配置的原因吧。因为所以api都有了前缀api，如何辨别跨域呢？还好proxy是按照注册顺序进行匹配的，所以把跨域的api放在前面优先匹配就好了。

  axios: {
    proxy: true,
    prefix: '/api', // it only work when proxy is enabled
    credentials: true,
  },
  proxy: {
    '/api/proxy/douban': {
      target: 'https://api.douban.com',
      changeOrigin: true,
      pathRewrite: { '^/api/proxy/douban': '' },
    },
    '/api': {
      target: (IS_DEV || process.server)
      ? 'http://localhost:8000'
      : 'https://lijun.space',
      changeOrigin: true,
    },
  },