React.js中Proxy配置无效，请求仍走3000端口致404错误

我需要从8000端口获取数据，但始终返回404错误，排查后发现请求还是走了3000端口。已经在package.json里配置了proxy，但不知道问题出在哪。

错误信息：

GET http://localhost:3000/hotels/countByCity?cities=berlin,madrid,lodon 404 (Not Found)

相关代码 #

package.json #

{
  "name": "booking",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "date-fns": "^2.29.3",
    "react": "^18.2.0",
    "react-date-range": "^1.4.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy":"http://localhost:8000/api"
}

useFetch.js #

import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await axios.get(url);
        setData(res.data);
      } catch (err) {
        setError(err);
      }
      setLoading(false);
    };
    fetchData();
  }, [url]);

  const reFetch = async () => {
    setLoading(true);
    try {
      const res = await axios.get(url);
      setData(res.data);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  };

  return { data, loading, error, reFetch };
};

export default useFetch;

featured.jsx #

import React from 'react'
import "./featured.css"
import useFetch from "../../hooks/useFetch"
const Featured = () => {
const{ data,loading,error}=useFetch("/hotels/countByCity?cities=berlin,madrid,lodon")
console.log(data);
    return (
        <div className='featured'>
            <div className="featuredItem">
                <img className='featuredImg' src="https://i.pinimg.com/564x/53/47/6a/53476a9ce987dcc41b19385744f09ab3.jpg" />
                <div className="featureTitle">
                    <h1>Amazônia.</h1>
                    <h3>189 properties</h3>
                </div>
            </div>

            <div className="featuredItem">
                <img className='featuredImg' src="https://i.pinimg.com/564x/cf/fb/34/cffb34899bc7e9262f4f91270d51677d.jpg" />
                <div className="featureTitle">
                    <h1>Avignon’s historic center.</h1>
                    <h3>259 properties</h3>
                </div>
            </div>

            <div className="featuredItem">
                <img className='featuredImg' src="https://i.pinimg.com/564x/7f/6f/0a/7f6f0a8668aa2da61d9025859406e2f1.jpg" />
                <div className="featureTitle">
                    <h1>Naz City Hotel Taksim</h1>
                    <h3>345 properties</h3>
                </div>
            </div>
        </div>
    )
}

export default Featured

排查与解决方法 #

1. 重启React开发服务器 #

React的proxy配置仅在启动服务器前读取生效，修改package.json后必须重启npm start，否则新配置不会加载。

2. 检查API路径匹配 #

你的proxy设置为http://localhost:8000/api，意味着前端请求/hotels/xxx会被代理到http://localhost:8000/api/hotels/xxx。需要确认后端8000端口是否真的存在这个路径：

• 如果后端接口没有/api前缀，直接把package.json里的proxy改成http://localhost:8000即可。

3. 确认Axios无全局baseURL覆盖 #

检查是否在其他代码中给Axios设置了baseURL为http://localhost:3000，这会直接覆盖proxy规则。可以在useFetch里临时打印验证：

console.log(axios.defaults.baseURL);

4. 改用环境变量替代proxy（可选） #

如果上述方法无效，可在项目根目录创建.env.development文件，添加：

REACT_APP_API_URL=http://localhost:8000/api

然后修改useFetch的请求代码：

const res = await axios.get(`${process.env.REACT_APP_API_URL}${url}`);

这种方式更灵活，也避免了React脚本的proxy限制。

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