create-react-app 不适用于代理

服务器

使用create-react-app时，我们经常会遇到需要处理代理的情况。然而，create-react-app本身并不提供直接的代理功能。这可能会给我们带来一些麻烦，特别是在开发阶段需要与后端API进行通信时。

幸运的是，我们可以通过使用其他工具来实现代理。一种常用的方法是使用http-proxy-middleware库。该库可以帮助我们在开发环境中轻松地设置代理，以便我们可以将请求转发到我们指定的目标服务器上。

首先，我们需要在项目中安装http-proxy-middleware库。可以通过运行以下命令来完成安装：

npm install http-proxy-middleware --save

安装完成后，我们可以在src目录下创建一个setupProxy.JS文件。这个文件将用来配置我们的代理设置。在这个文件中，我们可以指定需要转发的请求和目标服务器的地址。

下面是一个示例的setupProxy.JS文件的代码：

Javascript
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://example.com',
      changeOrigin: true,
    })
  );
};

在上面的代码中，我们指定了一个代理规则，将以/api开头的请求转发到http://example.com目标服务器上。我们还将changeOrigin选项设置为true，以便在转发请求时更改请求的origin。

要使用代理，只需在我们的代码中使用相对路径来发送请求。例如，我们可以使用axIOS库来发送请求：

Javascript
import axIOS from 'axIOS';
axIOS.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们发送了一个GET请求到/api/data，而不需要指定完整的URL。http-proxy-middleware将自动将这个请求转发到我们在setupProxy.JS中配置的目标服务器上。

使用自定义代理的好处

自定义代理的一个好处是我们可以轻松地切换目标服务器。在开发阶段，我们可以将请求转发到本地服务器或模拟的API上。而在生产环境中，我们可以将请求转发到实际的后端服务器上。

此外，使用代理还可以避免跨域问题。在开发阶段，我们的前端代码通常运行在本地开发服务器上，而后端API可能运行在不同的域上。通过使用代理，我们可以绕过浏览器的同源策略，顺利地进行跨域请求。

尽管create-react-app本身不提供代理功能，但我们可以使用http-proxy-middleware库来实现代理。通过在项目中创建setupProxy.JS文件并配置代理规则，我们可以轻松地将请求转发到指定的目标服务器上。这样，我们就可以在开发阶段轻松地与后端API进行通信，并且避免了跨域问题。