前言

前端项目开发过程中，经常会遇到各种各样的跨域问题。

虽然大部分时候，由脚手架自带的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即可。