持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
首先项目的前后端完全分离，并且前端和后端各用了一个服务，也就是两个服务，方便前后端各自分开开发； 在前端用react开发完之后，一般都是用的webpack来开启前端服务，然后后端也同时开启对应的后端服务。
第一种情况：前端和后端代码都在本地。
此时本地的前后端服务分别是：
而前端代码中一般都会有大量需要访问后端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的代理也会失效，如下图：
图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），了解更多的前后端知识；
欢迎大家关注互相交流学习；
