React反向代理-跨域

反向代理

• 目的：解决跨域问题

1. 在src目录下新建一个setupProxy.js

2. const { createProxyMiddleware } = require('http-proxy-middleware');
   module.exports = function(app) {
     app.use(
       '/xxx', //当请求到关于/xxx的请求时会被拦截 从而代理服务器会像跨域的服务器发起请求获取数据，达到转发的效果（为什么要有代理服务器？因为服务器与服务器之前是不存在跨域的）
       createProxyMiddleware({
         target: '跨域的url域名',
         changeOrigin: true
       })
     )
   }
    /*
      例如我们的接口地址是  https://info666.com/api/getData、https://info666.com/api/....
      我们可以这样配置
     */
    app.use(
       '/api',
       createProxyMiddleware({
            target: 'https://info666.com',
            changeOrigin: true
       })
     )
   
   

3. 重启服务

• 注：配完代理后，我们直接请求代理服务器即可，代理服务器会做转发操作，所以我们配完不能直接请求接口地址，而是请求代理服务器，代理服务器帮你去请求接口地址.
• 数据流：我 => 代理服务器 => 接口地址