webpack如何跨域和打包线上如何用nginx跨域？

首先项目的前后端完全分离，并且前端和后端各用了一个服务，也就是两个服务，方便前后端各自分开开发；
在前端用react开发完之后，一般都是用的webpack来开启前端服务，然后后端也同时开启对应的后端服务。

第一种情况：前端和后端代码都在本地。
此时本地的前后端服务分别是：
前端：http://localhost:8888
后端：http://localhost:8085

而前端代码中一般都会有大量需要访问后端API接口的功能，因为前后端是不同的两个服务，因此会涉及到跨域访问后端API接口，
这个时候就需要对webpack的devServer这个属性进行代理配置，

    devServer:{
        // 配置代理
        proxy: {
            '/': {
                target:"http://localhost:8085" 
            }
        }
    },

如下图：
图1

这样本地的前端项目就能访问本地后端服务（http://localhost:8085）的API接口了，如下图就是访问本地后端项目的其中一个接口的情况，如下图：
图2

虽然图中的http://localhost:8888/api/details/querypage?current=1&pageSize=10 这个接口前面是以前端服务的http://localhost:8888开始，但是由于对webpack设置了代理，
因此实际是访问的后端服务http://localhost:8085再加上接口地址；
而【状态代码：200】表示接口调用成功并返回了接口数据；
响应标头的【access-control-allow-origin: *】表示后端的允许跨域，代码如下图：
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
图3

这样数据就能返回给前端了。

第二种情况：前端代码在本地，后端代码在服务器上。
此时本地的前端服务和服务器上面的后端服务分别是：
前端：http://localhost:8888
后端：http://【这里是服务器的地址】:8085

这时候前端的代理中的http://localhost:8085改为http://【这里是服务器的地址】:8085，

    devServer:{
        // 配置代理
        proxy: {
            '/': {
                target:"http://xxx.xxx.xxx.xx:8085" 
            }
        }
    },

如下图：
图4

第三种情况：前端代码和后端代码都在服务器上。
此时在服务器上面的前端服务和后端服务分别是：
前端：http://web.yydpt.com/     这里的前端是设置了域名；
后端：http://【这里是服务器的地址】:8085

react前端代码需要先在本地编译发布，之后将编译的代码放到服务器上面去，由于在服务器上面的前后端是两个不同的服务，不是一个服务，因此也会有跨域问题，而服务器上面的前端代码也没有用webpack启动服务，因此这个时候的前端webpack的代理也会失效，如下图：
图5

 
图6

而服务器上面的前端服务是用nginx进行的反向代理，代码：

  #自定义的项目服务
    
    server {
        listen *:80;
        server_name  web.yydpt.com; // 配置的前端服务，用的域名
        root         /home/yydpt/webproject/webbase/development;

        location /webbase {
            proxy_pass http://127.0.0.1:9999;
            proxy_set_header Host $host:80;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

       //  代理后端的接口
        location /api {
            proxy_pass http://xxx.xxx.xxx.xx:8085;
        }
    }

如下图：
图7

效果图：
图8

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；