javascript - 如何使用 Nuxt 为不同的 API 服务器设置代理？

Question

所以我有2个应用程序:

可通过 http://10.10.120.4:3333 访问的 Adonis API 服务器

使用 Nuxt.js 的 SSR 应用程序，可通过 http://10.10.120.4:80 访问

Nuxt.js 应用程序可在外部使用 url http://my-website.com 访问.我有这个配置的 axios 模块

axios: {
    baseURL: '0.0.0.0:3333/api',
    timeout: 5000
}

现在的问题是，当我使用 asyncData 请求数据时，它可以工作，但是当请求是从外部 asyncData 发出时，比如说 created()例如，它会抛出一个错误，说 url http:0.0.0.0:3333缺少这是真的，因为它已经在浏览器中而不是在服务器中运行。

我尝试的第一个解决方案是更改 baseURL axios 模块到此

axios: {
    baseURL: 'http://my-website.com/api',
    timeout: 5000
}

但是好像nuxt server 找不到，所以我觉得解决办法是做代理并安装 @nuxtjs/proxy .

这是我在 nuxt.config.js 中的代理配置

{
  proxy: {
    '/api': 'http://my-website.com:3333',
  }
}

然后我只是将我的 axios baseURL 更改为

http://my-website.com/api

但它又没有用。

我的问题是，您如何处理这种情况？从浏览器访问不同的服务器？

Answer 1

在 nuxt 项目中使用 Proxy 时，您需要删除 baseUrl 并将 proxy 设置为 true ，如下所示。

axios: {
   // Do away with the baseUrl when using proxy
    proxy: true
  },

  proxy: {
    // Simple proxy
    "/api/": {
      target: "https://test.com/",
      pathRewrite: { "^/api/": "" }
    }
  },

调用您的端点时，请执行以下操作:

// append /api/ to your endpoints
const data = await $axios.$get('/api/users');

结帐 Shealan article