首先项目的前后端完全分离,并且前端和后端各用了一个服务,也就是两个服务,方便前后端各自分开开发;
在前端用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),了解更多的前后端知识;
欢迎大家关注互相交流学习;