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

Question

所以我有2个应用程序：

1. 可通过以下方式访问的 Adonis API 服务器 http://10.10.120.4:3333

2. 使用 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()例如，它会抛出一个错误，指出http:0.0.0.0:3333缺少url ，这是正确的，因为它已经在浏览器中运行而不是在服务器。

我尝试过的第一个解决方案是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 项目中使用代理时，您需要删除 baseUrl 并将代理设置为 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文章