How the @ nuxtjs/axios module configures cross-domain

want to call an API across domains. According to the official document, the configuration in nuxt.config.js is as follows:

  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)
  }

indicates that the configuration has been initialized correctly. The problem is that this log is available only when the page is refreshed for server rendering. In this case, the path is a page route rather than an api request, but the request on the page is not proxied.
is very strange. I don"t know what is wrong with the configuration. Please help me.

Mar.29,2021

after reading the nuxtjs/axios document carefully, I finally found some problems. One is that the prefix configuration is not ineffective, but is only valid when proxy enable. baseUrl is the server rendering url, will not go to proxy, browserBaseURL if it is configured for server rendering, because some cross-domain api will render calls on the server, so you cannot configure baseUrl . All api need to go proxy,. This is why this is the only configuration in the official documentation when proxy is enabled. Because all api have the prefix api , how to distinguish between domains? Fortunately, proxy matches in the order in which they are registered, so it would be nice to give priority to cross-domain api matching.

  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,
    },
  },
Menu