关于react与后端交互的问题

在自己电脑开发网站 react + springboot,在需要前后交互时在react中webpackDevServer.config.js配置

但是每次交互时需要在url前面加上"/api"

最后要将react和springboot整合时，需要将前面加的 "/api" 去掉才能正常交互。如果后续要对网站进行改动还需要频繁加减"/api"，这样很麻烦。怎样才能在不去掉 "/api" 情况下也能正常交互，或者什么方法可以在本地开发时可以不用加 "/api" 就能与后端交互？

可以尝试使用反向代理来解决这个问题。通过配置反向代理，将所有以 "/api" 开头的请求转发到后端的接口上。

比如在开发时，可以在 React 项目的 package.json 中添加如下配置：

"proxy": {
  "/api": {
    "target": "http://localhost:8080"
  }
}

这里将以 "/api" 开头的请求转发到本地的 8080 端口，即后端服务的端口。这样在开发时就不需要在请求的 URL 中加上 "/api" 前缀了。

在将 React 和 Spring Boot 整合时，可以将反向代理的配置移动到生产环境的配置中，或者使用 Nginx 等工具进行反向代理配置。

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  回答：

  这个问题可以通过配置代理来解决。可以在React的package.json文件中添加一个proxy属性，来指定后端接口的地址，这样在本地开发中就可以直接通过接口名进行访问，而不用在URL前面添加“/api”。

  举个例子，假设后端接口的地址为http://localhost:8080/api，那么在React的package.json文件中添加以下代码：

  {
    "name": "my-app",
    "proxy": "http://localhost:8080"
  }
  

  这里的proxy属性指定了代理的地址，也就是后端接口的地址。这样，在React代码中就可以直接使用后端接口的地址了：

  axios.get('/api/users')
  

  此时，在本地开发环境中，React将会将接口请求转发给http://localhost:8080/api/users，而在部署到生产环境中，由于代理只存在于开发环境中，所以不需要再添加“/api”。

  如果想要通过React的WebpackDevServer在本地开发时保留“/api”前缀，可以在webpackDevServer.config.js文件中添加一个proxy属性，例如：

  module.exports = {
    // ...
    devServer: {
      proxy: {
        '/api': 'http://localhost:8080'
      }
    }
    // ...
  }
  

  这里的'/api'表示需要在请求中添加的前缀，'http://localhost:8080'表示后端接口的地址。这样就可以通过React的WebpackDevServer在本地开发时保留“/api”前缀，在最终部署到生产环境中时去掉“/api”，同时也避免了频繁更改加上/去掉“/api”的麻烦。

  希望这个解决方法对你有所帮助！

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^