首先项目的前后端完全分离,并且前端和后端各用了一个服务,也就是两个服务,方便前后端各自分开开发; 在前端用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再加上接口地址;
响应标头的【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
#自定义的项目服务
server {listen *:80;server_nameweb.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
原文地址:https://www.jb51.cc/wenti/3285837.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。