通过Nginx代理转发配置实现跨域的方法(API代理转发)-创新互联

前言

创新互联专注于富县企业网站建设,成都响应式网站建设,商城网站开发。富县网站建设公司,为富县等地区提供建站服务。全流程按需搭建网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

在WEB开发中,我们经常涉及到跨域的请求,解决跨域问题的方式有很多,比如有window.name、iframe、JSONP、CORS等等,就不详细展开了,涉及到 协议、端口 不一样的跨域请求方式是采用代理,这里我们重点聊聊Nginx代理的方式。

场景
本地启动了一个前后端分离的WEB应用,端口为:3000,可以通过http://127.0.0.1:3000访问前端页面,页面中有些Ajax请求的地址为http://127.0.0.1:3000/api/getList,一般情况下肯定是404或者请求失败,如下图:

通过Nginx代理转发配置实现跨域的方法(API代理转发)

这种后端服务的接口存放在于其他的服务器中,比如在公司内网可以通过http://172.30.1.123:8081/api/getList访问到测试环境中的服务接口。

这种情况的请求就涉及到端口不一样的跨域了,那么我们可以利用Nginx代理请求。

Nginx代理配置参考

首先找到Nginx配置文件:

  • Windows下路径就是你安装Nginx目录下找,比如我的放在C盘根目录,那就是:c:\nginx\conf\nginx.conf
  • Mac系统配置文件路径在: /usr/local/etc/nginx/nginx.conf, Finder下通过Shift+Command+G,输入/usr/local/etc/nginx/进入该目录。

在Nginx配置文件中添加如下配置:

server {
 listen 80;
 server_name 127.0.0.1;

 location / {
 proxy_pass http://127.0.0.1:3000;
 }

 location ~ /api/ {
 proxy_pass http://172.30.1.123:8081;
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文题目:通过Nginx代理转发配置实现跨域的方法(API代理转发)-创新互联
分享网址:http://pwwzsj.com/article/jscjs.html