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

Posted 2023-02-22

【中文标题】如何使用 Nuxt 为不同的 API 服务器设置代理？

【英文标题】：How to set proxy for different API server using Nuxt?

【发布时间】：2020-07-11 13:45:31

【问题描述】：

所以我有 2 个应用程序：

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

一个使用 Nuxt.js 的 s-s-r 应用，可通过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 这是真的，因为它已经在浏览器中而不是在服务器中运行。

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

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

但还是不行。

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

【参考方案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');

结帐希兰article