Question

我使用create-react-app来引导我的反应应用程序，我在package.json中做了这个

"proxy":"http://localhost:3001"因为我的api服务器在3001上运行，但我使用axios发出请求，它仍然指向端口3000，任何线索缺少什么？几次重启我的应用程序仍然是一样的。

Answer 1

在您的package.json中添加：

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

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

确保您对axios的发布请求如下所示：

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

上面的示例来自我的环境，也可以正常工作。请注意，代理仅适用于开发模式

确保您的代码在Proxy中的url和axios中都使用正确的斜杠

Answer 2

问题在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'
});

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

Answer 3

这只是Windows权限问题，即使它经常在Mac上也可以使用。
我刚刚安装-在服务器端添加yarn global添加http-server，现在从客户端可以正常工作

Answer 4

尝试删除请求的绝对路径，而改用相对路径。

示例

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

注意：请勿使用http://localhost:3000/auth/register作为请求URI，它（React服务器）将自动代理请求，并且API请求将从 3001 端口。

Answer 5

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

Answer 6

我知道这篇文章很旧，但是最近我遇到了同样的问题。

对我来说，修复此问题的方法是使用npm软件包 axios 发出API请求，而不是使用本机JavaScript提取API。

我看起来还不够深入，无法看到axios的请求标头与获取标头有什么不同，但是现在一切对我来说都很好。

Answer 7

我遇到了这个问题，并且一切都“正确”了。对我来说，GET请求将发送到我的代理服务器，而不是POST！我收到了请求中止错误。

偶然发现了我的data : { key: value}需要正确引用为data : { "key": value }的解决方案。

Answer 8

我从create-react-app开始，然后添加了Node.js Express服务器（在Mac OS上）。在阅读了许多解决方案，多次重启服务器之后，我仍在努力使其与代理一起使用并能够获取（'/ api / hello'）。这实际上对我有用：

更改webpack.config.js

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

我重新启动了计算机（它显然对某些人有用）。后来我发现devServer在webpack.config.js中定义了两次...

Answer 9

我阅读了该问题可能导致使用访存而不是axios的答案。不正确，错误是错误的请求/正文（您需要在代码中查找）。

对于所有正在寻找答案的人，请注意，如果您通过creat-react-app创建应用并且没有webpack.config.js，则这是另一种解决方案。然后，您需要设置的足够多的是将proxy添加到package.json

应该如何看待正确的提取请求：

 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
    })

为获得更好的调试效果，请从开发人员工具中添加“网络”标签的打印屏幕

Answer 10

开发环境的代理设置：

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 环境的代理设置：

在公用文件夹中创建一个serve.json文件，然后插入以下任何properties：

serve.json包含：

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

npm install -g serve
serve -s build

Answer 11

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

<块引用>

开发服务器只会尝试不发送请求 text/html 到代理的 Accept 标头中。

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

Answer 12

试试这个：

{
  "proxy": {
    "/api/foo": {
      "target": "your url" ,
      "changeOrigin": true
     },
    "/api/bar": {
      "target": "another url",
      "changeOrigin": true
     },
   }
}

create-react-app不能与代理一起使用

12 个答案: