一文看到懂Nginx反向代理解决跨域/doge

前言

说起来挺不好意思的，这么久了才搞明白这个，之前对于解决跨域问题，尝试了好几次，有时候放弃了，有时候解决了，但总体还是迷糊的，对于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;
        }
    }

四、参考资料

1. 如何用Nginx解决前端跨域问题？
2. 前后端分离利用nginx转发请求后台接口地址