zoukankan      html  css  js  c++  java
  • 通过 Nginx 代理转发配置实现跨域(API 代理转发)

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

    阅读 2285
    收藏 119
    2017-04-08
    原文链接:www.thinktxt.com

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

    场景

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

    API请求404

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

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

    Nginx代理配置参考

    首先找到Nginx配置文件:

    • Windows下路径就是你安装Nginx目录下找,比如我的放在C盘根目录,那就是:c: ginxconf ginx.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;
    }

    }

    上面的配置的可以理解为:

    监听80端口(Nginx默认启动了80端口),将http://127.0.0.1的所有请求服务转发到127.0.0.1端口为3000
    http://127.0.0.1/api/或者http://127.0.0.1/api/getList请求转发到http://172.30.1.123:8081

    完成

    经过上面的配置我们可以直接通过http://127.0.0.1访问我们的WEB应用(如果觉得IP访问),而相关的API请求也会根据我们的Nginx配置进行相应的请求,浏览器端看到的/api/getList请求的是127.0.0.1端口为80的端口,但是实际上这个请求已经被我们的Nginx转发指向http://172.30.1.123:8081/api/getList

    友情提示:

    Nginx每一条配置语句后面都必须要加分好; 否则会报配置错误,自己还一脸懵逼。

    拓展

    绑定host

    如果你觉得输入IP访问不爽那你可以自己修改host,推荐host修改神器:SwitchHosts
    如果绑定了host,在Nginx配置中当然也可以直接配置你指定的域名,譬如:

    server {
        listen  80;
        server_name www.domain.com;  #这里将IP改成你的域名
        #...
    }
    

    修改host后你可以直接通过你的域名访问,如:http://www.domain.com

    关于location

    上面的配置你可能会对localtion后面的配置感到疑惑,关于localtion后面的常用的需求有:

    localtion / {
        # 所有请求都匹配以下规则
        # 因为所有的地址都以 / 开头,所以这条规则将匹配到所有请求
        # xxx 你的配置写在这里
    }
    

    location = / {
    # 精确匹配 / ,后面带任何字符串的地址都不符合
    }

    localtion /api {
    # 匹配任何 /api 开头的URL,包括 /api 后面任意的, 比如 /api/getList
    # 匹配符合以后,还要继续往下搜索
    # 只有后面的正则表达式没有匹配到时,这一条才会采用这一条
    }

    localtion ~ /api/abc {
    # 匹配任何 /api/abc 开头的URL,包括 /api/abc 后面任意的, 比如 /api/abc/getList
    # 匹配符合以后,还要继续往下搜索
    # 只有后面的正则表达式没有匹配到时,这一条才会采用这一条
    }

    • / 通用匹配, 如果没有其它匹配,任何请求都会匹配到
    • =开头表示精确匹配
      如 A 中只匹配根目录结尾的请求,后面不能带任何字符串。
    • ^~ 开头表示uri以某个常规字符串开头,不是正则匹配
    • ~ 开头表示区分大小写的正则匹配;
    • ~* 开头表示不区分大小写的正则匹配

    原文:https://blog.csdn.net/qq_36486737/article/details/83141598

  • 相关阅读:
    Wireshark使用
    21世纪最需要的7种人才
    .net中生成ssl web证书
    flash10a.ocx无法删除的解决
    iframe无刷新异步上传
    jquery验证网址输入
    jquery验证省市级联
    .net代码生成器自动生成DAL和BLL类库
    jquery实现checkbox全选(不全选)
    Web.config配置文件初识
  • 原文地址:https://www.cnblogs.com/showcase/p/13163464.html
Copyright © 2011-2022 走看看