前言
说起来挺不好意思的,这么久了才搞明白这个,之前对于解决跨域问题,尝试了好几次,有时候放弃了,有时候解决了,但总体还是迷糊的,对于nginx反向代理还是不会
具体原因我觉得是很多文章都是直接给了nginx.conf的配置,什么情况也没说,很难理解,所以基于这种情况我觉得我很有必要把的这个心路历程记录下来
以下主要是我个人,对Nginx反向代理解决前端跨域这个问题的认识过程
一、开始我眼中的Nginx反向代理
场景是这样:
一个前端(Vue)程序,要访问后端服务(Java),结果发起请求的时候,发生了跨域
前端:localhost:8080
后端:localhost:8083
结果呢,肯定是失败告终,这个想法维持了我很长一段时间,直到最近,我才理解了他的真正的样子
二、真实的反向代理
按前面的图来的话, 正常情况
前端:localhost:8080
后端:localhost:8083
前端请求会报跨域,这时候我们加个nginx,端口随便一个没被占用的都可以
这里8888,加入如下配置
# 这个10.15.55.68就是localhost
server {
listen 8888; # 我们要监听的端口(可以是没有被占用的任意端口号)
server_name 10.15.55.68; # 你的服务器ip地址
location /{ # 代理/开头的路径
proxy_pass http://10.15.55.68:8080/; # 代理指向的ip地址以及端口号,切记加上http
}
location /api { # 代理api开头的路径
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://10.15.55.68:8083/; # 指向后端接口的IP地址加端口号
}
}
配置好后,我们可以通过访问
localhost:8888
nginx会去访问 localhost:8080 然后8080访问8083
三、打包部署方式代理
如果是vue项目通过打包(npm run build)获得的或者别的静态html项目,可以直接放在nginx的html目录下,只需要配置一个/api, / 指向url改成root的项目地址即可
理论上就是上面的两个location拿过来, location /的代理地hi改为本地
这样就少了一个端口
server {
listen 80;
server_name localhost;
location / {
root /usr/local/nginx/html/record-web;
index index.html index.htm;
try_files $uri $uri/ /index.html; #解决页面刷新404问题
}
#开始配置我们的反向代理
location /api{ #"/api"中的api可以替换为自定义的任何内容
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://www.reentrantlock.cn:8083; #我们要反向代理的地址
}
root html;
}
}