部署在Azure上的后端，create-react-app代理请求出现404错误

我之前也踩过这个坑！你在package.json里写的这种对象格式的proxy配置，create-react-app的内置代理是不支持的——它只认单一字符串地址的简单代理配置。所以你的路径匹配规则根本没生效，请求自然就返回404了。

正确的配置方式（使用http-proxy-middleware） #

因为你需要路径匹配这类复杂代理规则，得手动用中间件来配置：

1. 首先安装依赖：

npm install http-proxy-middleware --save-dev
# 或者用 yarn
yarn add http-proxy-middleware --dev

2. 在你的React项目的src目录下，创建一个名为setupProxy.js的文件（文件名必须完全一致，create-react-app会自动加载这个文件，不需要手动引入）
3. 在setupProxy.js里写入以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api/*',
    createProxyMiddleware({
      target: 'https://mytestbackend.azurewebsites.net',
      secure: false,
      changeOrigin: true, // 这个很重要，不然Azure可能会因为跨域问题拒绝请求
    })
  );
};

4. 重启你的React开发服务器——配置文件修改后必须重启才能生效！
5. 检查你的axios请求，确保是用相对路径发起的，比如：

// 正确的写法
axios.post('/api/login', { username, password })
// 错误的写法（不要带完整域名，否则会绕过代理）
axios.post('https://mytestbackend.azurewebsites.net/api/login', ...)

额外排查项 #

• 先确认你的Azure后端确实存在/api/xxx这样的接口路径，直接在浏览器或者Postman里请求试试，排除后端本身的问题
• 如果还是有问题，打开浏览器的Network面板，看看实际发送的请求路径是什么，确认代理有没有把请求转发到正确的地址
• secure: false是关闭SSL证书验证，如果你用的是Azure提供的正式HTTPS证书，其实可以去掉这个选项，避免不必要的安全风险

内容的提问来源于stack exchange，提问作者tutiplain