使用nginx解决本地环境访问线上接口跨域问题

使用nginx解决本地环境访问线上接口跨域问题

引用

CSDN

1.

https://blog.csdn.net/SilenceJude/article/details/140688588

在前端项目开发过程中，经常会遇到各种各样的跨域问题。虽然大部分时候，由脚手架自带的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_passhttps://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即可。