Nuxtjs 如何为不同的 API 服务器设置代理？

在 Nuxt.js 中，为了解决跨域请求的问题或者为了将API请求指向不同的服务器，我们可以使用内置的代理模块或者通过配置自定义的代理规则。这是通过在 nuxt.config.js 文件中配置 proxy 属性实现的。以下是如何设置的步骤：

安装依赖

首先，确保安装了 @nuxtjs/proxy 模块。如果尚未安装，可以使用以下命令安装：

sh
npm install @nuxtjs/proxy --save

或者使用 yarn：

sh
yarn add @nuxtjs/proxy

配置 nuxt.config.js

然后，在你的 nuxt.config.js 文件中，首先要将 @nuxtjs/proxy 添加到 modules 部分，然后配置 proxy 属性。例如：

javascript
export default {
  // 其他配置...

  modules: [
    // ...其他模块
    '@nuxtjs/proxy',
  ],

  proxy: {
    '/api/': { target: 'http://api.server1.com', pathRewrite: {'^/api/': ''}, changeOrigin: true },
    '/api2/': { target: 'http://api.server2.com', pathRewrite: {'^/api2/': ''}, changeOrigin: true }
  },

  // 其他配置...
}

在上面的例子中：

• 对于所有指向 /api/ 路径的请求， Nuxt.js 将通过代理将这些请求转发到 http://api.server1.com。pathRewrite 属性确保了转发请求时去除了请求路径中的 /api/ 部分。
• 对于 /api2/ 路径，请求被转发到 http://api.server2.com，同样的，pathRewrite 去除了请求路径中的 /api2/。

changeOrigin 属性设置为 true 表示代理服务器会修改请求头中的 host 信息，以反映目标服务器的主机名。这通常是解决某些主机名检查的后端API所需的。

通过这种方式，你可以根据不同的路径设置多个代理规则，将请求转发到不同的API服务器。

使用代理进行开发

当你在本地开发时，你就可以直接通过 Nuxt.js 服务发起请求到 /api/ 或 /api2/ 路径，并且这些请求会被自动转发到相应的目标服务器上，无需担心跨域问题。

生产环境

在部署应用到生产环境时，要确保相关的代理服务已经被正确配置，以便代理规则继续生效。

示例:

假设你的Nuxt.js应用需要从不同的源获取数据，例如：

• 用户数据来自 http://user.api.server/
• 产品数据来自 http://product.api.server/

你的 nuxt.config.js 中 proxy 配置可能如下：

javascript
export default {
  // 其他配置...

  modules: [
    // ...其他模块
    '@nuxtjs/proxy',
  ],

  proxy: {
    '/users/': { target: 'http://user.api.server', pathRewrite: {'^/users/': ''}, changeOrigin: true },
    '/products/': { target: 'http://product.api.server', pathRewrite: {'^/products/': ''}, changeOrigin: true }
  },

  // 其他配置...
}

这样配置后，在你的Nuxt.js应用中，向 /users/ 发送的任何请求都会被代理到用户API服务器，而向 /products/ 发送的请求会被代理到产品API服务器。