create-react-app 不适用于代理

Question

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

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

Answer 1

在你的 package.json 添加：

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

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

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

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

上面的这个例子来自我的环境并且也有效。 请注意，代理仅适用于开发模式

确保您的代码在代理和 axios 中的 url 中具有正确的斜杠同时发布

Answer 2

尝试删除请求的绝对路径，并使用相对路径代替。

例子

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

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

Answer 3

问题出在 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 ，按照上面的代码进行更改并重新启动 dev-server，你应该没问题。 在这个路径上是webpack.dev.js和webpack.prod.js 。

Answer 4

我遇到了这个问题，我做了所有“正确”的事情。 对我来说，GET 请求会发送到我的代理，但不会发送到 POST！ 我收到请求中止错误。

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

Answer 5

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

Answer 6

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

对我来说修复它的是使用 npm 包axios来发出 API 请求，而不是本机 JavaScript fetch API。

我没有深入了解 axios 的请求标头与 fetch 有何不同，但现在一切对我来说都很好。

Answer 7

我从 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 8

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

对于所有正在寻找答案的人，请注意，如果您通过 creat-react-app 创建应用程序并且没有 webpack.config.js，这是不同的解决方案。 那么你需要设置的就是在你的 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 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
        },
        .
        .
        .
    })
...

生产环境的代理设置：

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

serve.json 包含：

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

npm install -g serve
serve -s build

Answer 10

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

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

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

Answer 11

1. 这只是一个 Windows 权限问题，即使它经常在 mac 上工作。
2. 我只是在服务器端安装了 - yarn global add http-server，现在它在客户端工作正常

Answer 12

尝试这个：

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