reactjs - 在 create-react-app 应用程序中代理请求

Question

我一直在寻找并试图找出为什么这不起作用。我有两个应用程序，一个客户端和一个服务器。我想将客户端请求代理到服务器。我有一条路线叫/api/repositories. 我不能在 package.json 中有代理，因为它也需要在生产中工作。

它是一个 Create React App 项目。这是重要的文件。

setupProxy.js

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

module.exports = (app) => {
  app.use(
    createProxyMiddleware("/api", {
      target: "http://my.server.com",
      changeOrigin: true,
      onProxyReq: (proxyReq) => {
        console.log("logged");
        if (proxyReq.getHeader("origin")) {
          proxyReq.setHeader("origin", "http://my.server.com");
        }
      },
    })
  );
};

我在一个名为 Searchbar 的功能性 React 组件中使用它，如下所示：

Searchbar.js

import axios from "axios"

async function getRepos() {
  const response = await axios({
    method: "GET",
    url: "/api/repositories",
  });

  return response.data;
}

function Searchbar() {
  const [repos, setRepos] = useState([]);

  // Get the repos on load
  useEffect(async () => {
    setRepos(await getRepos());
  }, []);

  return (
    <div>
      {repos.map((repo) => <p>{repo}<p>)}
    </div>
  );

}

但是，当我运行npm run start并运行开发服务器时，我所有的 API 请求都将转到http://localhost:3000/api/repositories，这显然会返回 404 错误。我究竟做错了什么？

标签： reactjsproxycreate-react-app