返回

axios联调坑记：后端如何拿到代理路径与如何解决必要字段缺失

前端

在项目联调过程中，常常会遇到一些稀奇古怪的问题，本文就记录了两个axios请求代理后遇到的问题及其解决方法。

1. 后端获取代理路径

在联调过程中，我们通常会使用代理服务器来模拟真实环境。当使用axios进行请求代理时，后端如何获取代理路径呢？

// 在前端代码中使用 axios 进行代理请求
axios.get('http://localhost:3000/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

如上例所示，我们在前端代码中通过axios发送了一个请求，代理路径为http://localhost:3000。但是，在后端代码中，我们并不能直接获取到这个代理路径。

为了解决这个问题，我们需要在后端代码中使用req.headers来获取请求头中的x-forwarded-host字段。这个字段的值就是代理路径。

// 在后端代码中获取代理路径
const proxyHost = req.headers['x-forwarded-host'];
console.log(proxyHost); // 输出：localhost:3000

这样，我们就可以在后端代码中获取到代理路径了。

2. axios代理请求后端报错“Required requ”

在使用axios进行请求代理时，我们还可能遇到另一个问题：后端报错“Required requ”。

Error: Request failed with status code 400
{
  "error": "Bad Request",
  "message": "Required requ"
}

这个问题的原因是，在使用axios进行请求代理时，需要在请求头中添加一个Origin字段。这个字段的值就是前端代码中发送请求的域名。

// 在前端代码中添加 Origin 请求头
axios.get('http://localhost:3000/api/user', {
  headers: {
    Origin: 'http://localhost:8080'
  }
});

这样，我们就可以在后端代码中获取到前端代码发送请求的域名了。

// 在后端代码中获取请求的域名
const origin = req.headers['origin'];
console.log(origin); // 输出：http://localhost:8080

这样，我们就解决了axios代理请求后端报错“Required requ”的问题。

以上就是axios请求代理时遇到的两个问题的解决方案。希望本文能帮助大家解决类似的问题。