Nginx 跨域代理

安装环境：

win10

nginx-1.17.2

安装:

在写前端调用后台接口时，报了跨域的错误。

调试地址：http://localhost:5500/demo/encAjax.html

接口地址：http://10.19.151.196:8070/A/B/C?ID=0

利用nginx配置跨域的原理是，将调试地址和接口地址映射成同源地址即可。

上述两个地址经代理后变成：http://localhost:8088/demo/encAjax.html访问http://localhost:8088/apis/A/B/C?ID=0（其中apis节点为设置的标识，后面介绍）

步骤：

一、打开nginx.conf

路径：\nginx-1.17.2\conf\nginx.conf

二、编辑

这里为nginx配置监听端口为8088（因为本机端口占用的问题需要改一下）

此时，在浏览器中输入http://localhost:8088，看到的是nginx的欢迎页面

 

三、跨域代理设置

修改nginx.conf文件，加上跨域头，代理调试地址，接口地址。

这里为接口地址上加上apis标识，目的是方便读取并过滤有/apis/节点的地址

改完后，保存并启动

 

四、验证

浏览器输入以下地址进行验证

http://localhost:8088/demo/encAjax.html

http://localhost:8088/apis/A/B/C?ID=0

 如果成功的话，下面两个网站内容应该一样。

http://localhost:8088/demo/encAjax.html与http://localhost:5500/demo/encAjax.html

http://localhost:8088/apis/A/B/C?ID=0与http://10.19.151.196:8070/A/B/C?ID=0

五、记录

在百度过程中，发现设置proxy_pass时，有讲究，记录一下（这里参考了：https://www.jb51.net/article/167402.htm）

Nginx将proxy_pass分为两种类型：

（1）一种是只包含IP和端口号的（连端口之后的/也没有，这里要特别注意），比如proxy_pass http://localhost:8080，这种方式称为不带URI方式；

（2）另一种是在端口号之后有其他路径的，包含了只有单个/的，如proxy_pass http://localhost:8080/，以及其他路径，比如proxy_pass http://localhost:8080/abc。