Vite设置好Proxy后，接口却404的完美解决方案！

前端

2023-10-06 05:21:18

前言

最近使用Vue3+Vite+TypeScript进行项目开发时，在配置好Vite的代理（Proxy）后，却发现接口总是返回404错误。经过一番探索，终于找到了完美的解决方案，让接口重获新生！

问题根源

当我们设置好Vite的代理后，会将前端请求重定向到指定的代理目标（一般是后端服务器地址）。但是，如果后端服务器没有正确配置跨域访问，就会导致前端请求被浏览器拦截，从而返回404错误。

解决方案

要解决这个问题，需要在后端服务器上配置CORS（跨域资源共享）头。CORS头允许后端服务器指定哪些域可以访问其资源，从而解决跨域问题。

具体配置方法如下：

修改后端服务器代码 ：在响应头中添加以下CORS头：

Access-Control-Allow-Origin: <前端应用的域>
Access-Control-Allow-Headers: <允许前端请求携带的头信息，例如Content-Type>
Access-Control-Allow-Methods: <允许前端请求的方法，例如GET、POST>

重启后端服务器 ：修改后，需要重启后端服务器，以使CORS头生效。

示例代码

以Node.js Express框架为例，修改后的代码如下：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  next();
});

app.get('/api/v1/users', (req, res) => {
  res.json([{ id: 1, name: 'John Doe' }]);
});

app.listen(3000);