create-react-app不支持代理

Question

我使用create-react-app来启动我的React应用程序，在package.json中添加了"proxy":"http://localhost:3001"，因为我的API服务器在3001端口上运行，但是我使用axios发送请求时，它仍然指向3000端口，请问缺少了什么？ 我重启了我的应用程序多次，问题仍然存在。

- Jenny Mok

---

我遇到了同样的问题。最终，我发现我发送了错误的请求体（例如，应该是：body: JSON.stringify(authData)而不是：body: JSON.stringify({authData})）。但这里的重点是，即使在我得到正确结果后：“Fetch finished loading: POST "http://localhost:3000/api/auth/signin"”，控制台仍然记录了我的客户端端口（3000），而不是服务器端口（3001）。因此，在我看来，我不能依赖控制台来知道代理是否起作用。在我的情况下，添加“proxy”：“http://localhost:3001”就足够了。我的错误在于请求本身。 - Nguyen

Answer 1

在你的 package.json 文件中添加：

"proxy": "http://localhost:3001",

请重新启动您的服务器（后端应用程序）和前端（Create React App）

请确保使用axios进行的POST请求如下：

axios.post("/auth/register", userData)
     .then(res => console.log(res.data));

上面的示例来自我的环境，并且同样有效。请注意代理仅在开发模式下起作用。

确保您的代码在代理和axios post请求中都使用正确的斜杠

- xargr

---

很好，我查看了几个解决方案，这是唯一一个对我有效的。 对于其他读者，请确保像他提到的那样关闭/重新启动客户端和后端，因为这是我的问题。 - Moody Omar

Answer 2

我遇到了一个问题，所有的操作“正确无误”，但是我的GET请求可以通过代理，而POST请求却不行！我得到了一个“请求中止”的错误提示。

后来我偶然发现解决方案——我的data : { key: value}需要加上双引号，写成data : { "key": value }。

- Riaan Schutte

Answer 3

尝试移除请求的绝对路径，改用相对路径。 示例

axios.post("/api/auth/register", userData)
 .then(res => console.log(res.data));

注意: 不要使用 http://localhost:3000/api/auth/register 作为请求URI, React服务器将自动代理请求，API请求将从3001端口提供服务。

- Malay M

Answer 4

问题出现在webpack配置文件中，使用你自己的起始包只需按照下面代码将webpack.dev.js设置即可。

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    host: 'localhost',
    port: 3000,
    open: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        secure: false
      }
    }
  },
  devtool: 'inline-source-maps'
}); 

请为您的服务器设置适当的本地主机，并重新启动开发服务器。在“create-react-app”中，webpack配置文件应该位于路径/node_modules/react-scripts/config，按照上面的代码进行更改，然后重新启动开发服务器，您就可以了解到这条消息。在此路径上有webpack.dev.js和webpack.prod.js。

- Goran_Ilic_Ilke

Answer 5

从create-react-app.dev/docs看：

开发服务器只会尝试将其接受标头中没有text/html的请求发送到代理。

因此，任何带有该标头的请求，例如响应单击链接（锚标签）而发送的GET请求将不会被代理。我建议首先查看浏览器开发工具中请求标头的“接受”字段。

- Mike Thielvoldt

---

或者，如果您需要代理返回text/html的请求（例如身份验证流程或其他重定向），请参阅此类似问题：https://dev59.com/Ibvoa4cB1Zd3GeqP4HVh - Alexander Taylor

Answer 6

我知道这篇文章已经有点旧了，但最近我也遇到了同样的问题。

对我起作用的是使用npm包axios来进行API请求，而不是原生JavaScript fetch API。

我没有深入研究axios和fetch之间有什么不同的请求头，但现在一切都正常工作。

- podenborg

Answer 7

将您的代理配置替换为以下内容："proxy": "http://127.0.0.1:5000"，确保在package.json的客户端中添加了代理，并在将代理配置移动到客户端后使用ctrl+c进行硬重启。

- Yamini Suman

Answer 8

我看到了一个回答，说使用fetch而不是axios可能会导致问题。但这并不正确，问题在于请求/主体不正确（你需要查看你的代码）。

对于所有正在寻找答案的人，请注意，如果您使用creat-react-app创建应用程序并且没有webpack.config.js，则有不同的解决方案。此时，您只需要在package.json中添加代理即可。

正确的fetch请求应该是什么样子：

 const options =  {
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, cors, *same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'include', // include, *same-origin, omit, chosen include to allowed sending cookies
  headers: {
    'Content-Type': 'application/json',
    COOKIE: 'key=value; Path=/; Expires=Thu, 09 Jul 2020 07:20:21 GMT; HttpOnly',
  },
  body: JSON.stringify({ something }), // body data type must match "Content-Type" header in this case it is json
})

 fetch(url, options)
    .then(res => {
      //return res.json!
        return res.json(); 
    })
    .then(data => {
        // do something with data
    })

为了更好地进行调试，最好在开发工具的网络选项卡中添加一个截图。

- adabedi

Answer 9

开发环境的代理设置：

package.json 包含：

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

...
  axios({
        method: "post",
        proxy: {
            host: "localhost",
            port: 3001
        },
        .
        .
        .
    })
...

针对 production环境的代理设置：

在public文件夹中创建一个serve.json文件，并插入以下任何属性之一：

serve.json 包含：

 {
  "redirects": [
    { "source": "/api", "destination": "http://localhost:3001/" }
  ]
 }

npm install -g serve
serve -s build

- Ali Motallebi

Answer 10

我是从create-react-app开始的，然后在Mac OS上添加了Node.js Express服务器。 经过阅读许多解决方案，重启服务器多次，我仍然难以通过代理使其能够获取('/api/hello')。 这是实际适用于我的内容：

更改webpack.config.js

devServer: {
    open: true,
    historyApiFallback: true,
    proxy: {
            '/api': {
                    target: 'http://localhost:3001',
                    secure: false
            }
    }
},

我重新启动了电脑（这对一些人似乎有效）。后来我发现在webpack.config.js中devServer被定义了两次...

- gaelle