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

  解决跨域：

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

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

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

方案一：

安装 http-proxy-middleware ：

npm install http-proxy-middleware --save

在src目录下创建 setupProxy.js 文件：

配置 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 文件，如下图所示：

在该文件中找到以下代码：

配置proxy：

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

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

方案三：

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

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

当然你也可以写完整：

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

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