初识react（6）——多种方法实现跨域请求

亦凉 2023-07-25 06:11 20阅读 0赞

**  解决跨域：**

**  1. 正向代理——开发环境：一个位于客户端和目标服务器之间的代理服务器。为了获取到目标服务器的内容，客户端向代理服务器发送一个请求，代理服务器帮助我们去目标服务器里面获取数据并返回给我们。**

**  2. 反向代理——上线环境：可以通过代理服务器来接受网络上的请求链接，然后将这个请求转发给内部的网络服务器，并把这个服务器上得到的数据返回给网络请求的客户端。此时代理服务器对外的表现就是一个反向代理。**

**  今天看了个视频，又在网上一搜，发现实现正向代理解决跨域问题的方案有很多，下面总结一下：**

**方案一：**

**安装 http-proxy-middleware ：**

npm install http-proxy-middleware --save

**在src目录下创建 setupProxy.js 文件：**  
![在这里插入图片描述][20200413095208464.png]  
**配置 proxy ：**

//解决跨域问题
    const proxy = require('http-proxy-middleware');
    console.log(proxy);
    module.exports = function(app) { 
        app.use(
            '/api',
            proxy.createProxyMiddleware({ 
                target:'http://localhost:3000',  // 跨域的域名
                changeOrigin: true,//默认false，是否需要改变原始主机头为目标URL
                pathRewrite: { 
                                "^/api": ""
                            }
            })
        );
    };

**可以给给 axios 配置 /api，实现跨域：**

axios.defaults.baseURL = '/api';

**我们这次react项目中用的便是这一种。**  
**这样就可以解决跨域问题。**  
**注意在实际运用时，target 内的跨域域名别忘记改成自己的。**

**方案二：**

**打开项目文件，根据路径 \\node\_modules\\react-scripts\\config 找到 webpackDevServer.config.js 文件，如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
**在该文件中找到以下代码：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
**配置proxy：**

proxy: { 
        '/api':{ 
            target:'http://localhost:3000',  // 跨域的域名
            changeOrigin:true,//默认false，是否需要改变原始主机头为目标URL
            "pathRewrite": { 
            	"^/api" : "/" // 重写请求，比如我们访问的是api，那么请求会被解析为/
            }
        }
    },

**这样就可以解决跨域问题。**  
**注意在实际运用时，target 内的跨域域名别忘记改成自己的。**

**方案三：**

**打开react项目中的package.json文件，添加proxy配置，具体配置项如下：**

"proxy":"http://localhost:3000" // 跨域的域名

![在这里插入图片描述][20200413094157335.png]  
**当然你也可以写完整：**

proxy: { 
        '/api':{ 
            target:'http://localhost:3000',  // 跨域的域名
            changeOrigin:true,//默认false，是否需要改变原始主机头为目标URL 
        }
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]  
**这样就可以解决跨域问题。**  
**注意在实际运用时，target 内的跨域域名别忘记改成自己的。**

[20200413095208464.png]: /images/20230528/cdc33932059c492095f60020f8f80d04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20230528/d4128e8a0756470b98b4cc2426c034a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20230528/ee5b4a2d42bd47918a5808d44fe35018.png
[20200413094157335.png]: /images/20230528/63ca7a4728a94df4a7a19e9b997b4497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20230528/7bc641f6ed25483fa112cc003c3fdd31.png