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。