React通过配置文件处理跨域问题

React处理跨域问题

一般有两种方式

• 正向代理（一般用于开发环境）：

  是一个位于客户端和原始服务器之间的服务器，为了从原始服务器取得内容， 客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。

• 反向代理（一般用户上线环境）:

  是指以代理服务器来接受 Internet 上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给 Internet 上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器

特点：

正向代理：

1. 代理客户;
2. 隐藏真实的客户，为客户端收发请求，使真实客户端对服务器不可见;
3. 一个局域网内的所有用户可能被一台服务器做了正向代理，由该台服务器负责 HTTP 请求;
4. 意味着同服务器做通信的是正向代理服务器;

反向代理：

1. 代理服务器;
2. 隐藏了真实的服务器，为服务器收发请求，使真实服务器对客户端不可见;
3. 负载均衡服务器，将用户的请求分发到空闲的服务器上;
4. 意味着用户和负载均衡服务器直接通信，即用户解析服务器域名时得到的是负载均衡服务器的 IP ;

如何配置代理

一共介绍了三种方式，
1. 最简单的就是在项目中的package.json文件中加上

"proxy": "http://localhost:5000"

例如

然后就可以通过axios.get(’/users’)去访问我http://localhost:5000/users接口的数据了。

2. 第二种可以采用配置文件来设置代理
在 src下新建 setupProxy.js文件 ，在里面设置如下代码

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy(
    '/api', {
        target: 'http://139.9.119.192:8080' ,
            secure: false,
                changeOrigin: true,
            pathRewrite: {
            "^/api": "/"
        },
        // cookieDomainRewrite: "http://localhost:3000"
    }
));
};

将代码中 target的值改成想要代理的路径即可 。第二种的访问方式需要有一点改变，需要在访问路径最前面加上"/api" 例如 axios0.get("/api/users")

3. 第三种 是从视频里了解的 ，本人测试不成功，可能是由于版本问题。
找到 node_modules下的react-scripts 中的config文件夹下的 webpackDevSever.config.js，

改成如下图就可以了，将要访问的地址设置为target就可以了。

以上配置代理 方式可能无法起效，可以采用配置文件来设置代理

在 src下新建 setupProxy.js文件 ，在里面设置如下代码

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy(
    '/api', {
        target: 'http://139.9.119.192:8080' ,
            secure: false,
                changeOrigin: true,
            pathRewrite: {
            "^/api": "/"
        },
        // cookieDomainRewrite: "http://localhost:3000"
    }
));
};

将代码中 target的值改成想要代理的路径即可 。