反应代理表达后端不工作

Question

我的问题是我在客户端文件夹中有一个 create-react-app 设置，我需要将它连接到我正在使用 express 的后端。快递服务器是运行在 localhost:3001，所以在客户端的 package.json 我有 "proxy": "http://localhost:3001".

client/package.json:

{
    ...
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "proxy": "http://localhost:3001",
    ...
}

当我尝试对服务器进行简单的提取时，CORS 被阻止，尽管服务器确认请求已命中。

server/index.ts:

app.get('/api', (req, res) => {
    console.log("Received");
    res.send("Received");
});

请注意服务器控制台记录“已收到”

client/App.tsx:

async function onclick () {
    await fetch('http://localhost:3001/api')
        .then((x: Response) => {
            console.log(x);
        })
        .catch((e: Error) => {
            console.log(e);
        });
}

控制台日志显示 e 是 'TypeError: failed to fetch'

如有任何帮助，我们将不胜感激。我已经检查了其他线程并尝试了他们删除 package-lock 和 node_modules 很多次的解决方案，但没有成功。

Answer 1

当您获取 http://localhost:3001/api 时，您正试图从节点服务器直接获取数据。该请求被视为 CORS，因为请求源和请求目标的端口不同：3000 != 3001。虽然 proxy server 在同一域和端口上工作，但您的 create-react-app 是从（在您的情况下为 http://localhost:3000）提供服务的。

更改请求 url 以向代理本身发出请求，这很好：

  ...
await fetch('/api')
  ...

或包含并配置 cors express middleware 以允许来自 localhost:3000 或其他可信来源的请求作为更高级的解决方案。

反应代理表达后端不工作

React proxy to express backend not working

node.js

express

reactjs

create-react-app