素材巴巴 > 程序开发 >

Nginx实现前端访问后端本地接口

程序开发 2023-09-07 23:08:52

今天前端打了个包,让我自己在本地测一下,属实给我整不会了。

一吭点月薪的后端开发,测试也要自己搞了,谁让咱技术菜,还得忍辱负重呢!

Nginx配置两个地方就行:

  1. 先是配置好自己项目的服务,确保自己的项目能运行:

server {
        listen       8089;                      //前端项目端口
        server_name  localhost;        //ip
        location / {
            root   F:工作文件unify-platform-ie;        //前端项目本地文件路径
            index  index.html index.htm;                   //首页页面
        }
    }

 能够正确看到你的前端页面就ok!

    2.  再是配置接口请求后端:

location /interface/plat20/ {   (前端访问后台接口的基础url)
            proxy_pass http://本机ip:8088/plat20/;(后端接口地址,端口号也要注意哦,不是80的记得带上端口号,eg:proxy_pass http://本机ip:8088)
            proxy_set_header Host 127.0.0.1;
        }

注意点(后端接口配置):

如果你的配置出现404了,这个时候你可以对照检查下面的问题是不是你遇到的。

  1. proxy_pass 地址后面要不要加“/”,这个取决于匹配的 /interface/plat20/ 作不作为你uri的一部分,如果 /interface/plat20/ 是其中一部分,则不需要带上“/”;
    反之带上。加了“/”相当于是绝对根路径,nginx 不会把location 中匹配的路径 /interface/plat20/带上。

    [举个列子]:

     请求地址原本是这样: http://192.168.1.1/api/a.html;如果配置是这样:proxy_pass http://192.168.1.1/;(后端接口地址)那么请求接口地址应该变成这样: http://192.168.1.1/a.html 
  2. proxy_pass的地址记得在hosts文件做ip映射,建议直接使用域名对应的ip地址。也可以像我上面那样直接写proxy_set_header Host 127.0.0.1;

  3. location 中 ~ (区分大小写)与 ~* (不区分大小写)标识均为正则匹配。
    如果你不确定,请在location后面加上 location ~* /api/ { }这样的配置(目的:不区分“api”三个字母的大小写)。

最后,后台项目启动起来,请求前端配置的端口,就可以连通测试了!


标签:

上一篇: easyflow 流程图 画布 原点坐标系 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。