前言
前端项目开发过程中，经常会遇到各种各样的跨域问题。
虽然大部分时候，由脚手架自带的proxy功能即可解决问题，如webpack，vite等；但是若没有通过脚手架搭建项目，或者必须使用某些特殊规则转发时，使用nginx则能够轻松解决问题。
1、场景描述
例如，这里我们有一个前端H5项目，项目服务器启动地址为A：http://localhost:7456，访问的接口服务器主机地址为B：https://test.online.cn/suffix/apipath
由于协议不同，域名不同，端口也不同，所以一定会提示跨域。
等我绘制一下草图：
2、Nginx代理解决方案原理：
跨域产生的原因就是不满足同源协议策略类，当协议，域名，端口任意一个不同，就会导致跨域，如上例中的A到B
如果此时用增加一个nginx代理服务器C，那么流程将变成：
C代理A，C也代理B，A到B的访问过程实际上就成了C访问C。
那么就一定满足同源协议策略类，就一定不会跨域了。
容我再画一下草图：
3、具体配置代码：
找到nginx.exe所在位置的conf文件夹下的nginx.conf，然后找到 http项下的server项，添加如下代码：
server {
监听的是ng服务器的地址和端口。这里配的是前端项目需要打开的地址和端口
listen 5000;
server_name localhost;
charset koi8-r;
access_log logs/host.access.log main;
代理的前端服务地址
location / {
这里是代理前端项目的配置，下面的地址是你前端项目启动时的地址和端口
proxy_pass http://localhost:7456/;
}
这里才是代理的接口服务,prefix 为请求接口的前缀，如 https://baidu.com/suffix/apipath
location /cmpm/ {
定义代理目标
proxy_pass https://xiaoneng.vpclub.cn/cmpm/;
}
}
如下图所示：
配置好之后，双击nginx.exe，启动nginx服务器。启动成功后，在任务管理器内能看到已启动的进程:
4、代码解释：
监听的是ng服务器的地址和端口。这里配的是前端项目需要打开的地址和端口
listen 5000;
server_name localhost;
这一块是配置的nginx服务启动的服务名称和端口，即地址C
代理的前端服务地址
location / {
这里是代理前端项目的配置，下面的地址是你前端项目启动时的地址和端口
proxy_pass http://localhost:7456/;
}
这一块配置的是nginx代理的前端服务器的地址，即本来我们应该访问的前端服务器地址A
这里才是代理的接口服务,prefix 为请求接口的前缀，如 https://baidu.com/suffix/apipath
location /suffix/ {
定义代理目标
proxy_pass https://test.online.cn/suffix/;
}
这一块是配置的代理接口地址，suffix 可以是接口地址中含有的一段，proxy_pass 设置的是需要代理的线上接口地址B
如项目中请求的地址为http://localhost:5000/suffix/apipath
Nginx根据suffix匹配成功，经过代理后实际访问的接口地址为：https://test.online.cn/suffix/apipath
5、前端请求接口地址修改：
需要注意的是，在1场景描述中的前端项目，直接访问的是线上地址B，而我们使用nginx代理后，应该访问nginx服务器所在的地址C
6、启动前端服务器，访问nginx服务器
最后，我们一定要记得启动前端项目服务器A，否则一个未启动的服务，nginx服务器启动了也无法进行代理。
访问的时候，直接访问nginx服务器所在的地址C即可。
