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

Question

所以我有 2 个应用程序：

1. Adonis API 服务器可通过

   http://10.10.120.4:3333

访问

2. 使用 Nuxt.js 的 SSR 应用程序，可通过

   http://10.10.120.4:80

访问

可以使用 url

http://my-website.com

在外部访问 Nuxt.js 应用程序。我有带有此配置的 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服务器似乎找不到它，所以我认为解决方案是制作代理并安装@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 文章

Answer 2

如果您有cors策略错误，简单的方法之一是您可以在项目上使用代理功能。 假设您使用 axios 模块，并且您的 url 服务器如下所示：

http://localhost:3000/api/v1/index

首先，您应该在 nuxt.config.js 文件中添加 axios 和 proxy 配置：

modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
proxy: true
},
 proxy: {
"/api": {
  target: "http://localhost:8081",
  pathRewrite: { "^/api": "/api" },
  changeOrigin: true
}
},

然后添加这样的代码来请求或任何你想要的：

methods: {
async show() {
  this.$axios.get('/api' + '/v1/index')
    .then(response => {
      console.log(response.data);

    })
    .catch(error => {
      console.log("this is error")
    })
}
}

注意：如果您想从 .env 文件读取基本 url， 将 "http://localhost:8081" 更改为 process.env.BASEURL:

proxy: {
"/api": {
  target: process.env.BASEURL,
  pathRewrite: { "^/api": "/api" },
  changeOrigin: true
}
},

然后在nuxt.config.js内的根项目中创建.env文件，然后在其上写入以下代码：

BASEURL=http://localhost:8081