鍍金池/ 問答/人工智能  HTML/ @nuxtjs/axios 模塊如何配置跨域

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

想跨域調(diào)用一個接口，按照官方文檔, 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': '' },
    },
  },

調(diào)用部分代碼：

    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請求，而頁面上的請求卻沒有被代理。
很奇怪，不知道是哪里配置有問題，請各路大神幫忙。

回答
編輯回答
愛是癌

又仔細看了一遍nuxtjs/axios文檔，才總算發(fā)現(xiàn)了一些問題，一個是prefix配置不是不起作用，而是在proxy enable時才有效，baseUrl是服務端渲染時走的url，如果配置了服務端渲染時就不會走proxy，browserBaseURL同理，因為有的跨域api會在服務端渲染調(diào)用，所以不能配置baseUrl, 所有api都需要走proxy，這也是官方文檔里proxy開啟時只有這一個配置的原因吧。因為所以api都有了前綴api，如何辨別跨域呢？還好proxy是按照注冊順序進行匹配的，所以把跨域的api放在前面優(yōu)先匹配就好了。

  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,
    },
  },
2017年6月13日 14:33