小技巧，学会Axios代理配置，轻松解决跨域问题！

2023-12-10 07:08:18

轻松驾驭跨域请求：Axios代理配置的两大秘诀

前言

对于前端开发者来说，跨域请求是不可避免的挑战。而Axios作为跨域请求的利器，深受众多开发者的青睐。然而，每次请求都需要加上繁琐的前缀，不仅令人头疼，还容易出错。今天，我们揭晓两个妙招，彻底解决你的前缀困扰，让跨域配置从此变得so easy！

秘诀一：利用package.json代理

认识package.json

package.json是每个前端项目的灵魂配置文件。它承载着项目的元数据、依赖关系和各种配置。

配置代理

在package.json中，你可以配置代理，让前端请求资源时直接走代理，无需再加前缀。这样一来，代码简洁美观，出错几率大大降低。具体步骤如下：

// package.json
{
  "proxy": {
    "/api": {
      "target": "http://localhost:3000",
      "changeOrigin": true
    }
  }
}

代理配置详解

"/api"是代理的前缀，"http://localhost:3000"是代理的目标地址，"changeOrigin": true表示允许跨域请求。

重启项目

配置完成后，保存package.json文件并重启项目。现在，你可以在前端代码中直接使用"/api"前缀来请求资源了，无需再加任何其他前缀。

秘诀二：自定义setupProxy.js代理

什么是setupProxy.js

package.json代理配置的缺点是不能配置多个代理。如果你需要灵活配置多个代理，就需要使用setupProxy.js文件。

创建setupProxy.js

在项目中创建名为"setupProxy.js"的文件，并添加代理配置：

// setupProxy.js
const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use('/api1', proxy({
    target: 'http://localhost:3001',
    changeOrigin: true
  }));

  app.use('/api2', proxy({
    target: 'http://localhost:3002',
    changeOrigin: true
  }));
};

更新package.json

// package.json
{
  "devServer": {
    "proxy": {
      "/api": {
        "target": "http://localhost:3000",
        "changeOrigin": true
      }
    },
    "setupProxy": "./setupProxy.js"
  }
}