最近维护一个老项目的时候,需要和前端联调,我在我本地启动后台项目,前端同事在他本地启动前端项目,调了很久后端代码,总是跨域,后端配置各种header参数都不好使。
解决思路,用nginx代理,让项目仿佛运行在同一个电脑。
前提,你俩项目能单独访问到,能ping或者telnet通。
举例个例子,
前端项目地址为 192.168.1.31:3000/xxxfront/。
后端项目地址为 192.168.1.32:4000/xxxback。
前端同事用他的项目指向你的后端项目时,提示跨域,此时,需要使用nginx配置。
server {
listen 8099;
server_name localhost;
#前端访问地址不能配置成下面这样,会导致只能访问静态文件,如果前端要调试,很多css js文件访问失败。
#location /xxxfront
#{
# proxy_pass http://192.168.1.31:3000/;
#}
location / {
proxy_pass http://192.168.1.31:3000/;
}
#后端访问地址
location /xxxback {
proxy_pass http://192.168.1.32:4000;
}
}
nginx在后端电脑上配置好后,前端项目不直接访问后端的路径,
改为访问后端nginx代理地址 http://192.168.1.32:8099/xxxback,
项目最终访问 http://192.168.1.32:8099/xxxfront/
画个图解释一下
最总访问地址http://192.168.1.32:8099/xxxfront/,因为都是通过nginx转发的,浏览器会认为访问ip、端口都一样,解决跨域。