Nginx配置两个地方就行:

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

        location / {
root /web/xiangmu/public; // 本地项目的路径
index index.html index.php;
}

再是配置接口请求后端:

     location /api/ {
proxy_pass http:// 192.168.1.1;(后端接口地址,端口号也要注意哦,不是80的记得加上端口号)
proxy_set_header: Host $host;
}

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

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

 1. proxy_pass 地址后面要不要加/取决于匹配的 /api/ 作不作为你uri的一部分,如果 /api/ 是其中一部分,则不需要带上" / "; 反之带上。加了" / "相当于是绝对根路径,nginx 不会把location 中匹配的路径 /api/ 带上。
如果你的配置跟上面一样,同时请求a.html页面:
请求地址应该要是这样的: 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地址。 3. location 中 ~ (区分大小写)与 ~* (不区分大小写)标识均为正则匹配。如果你不确定,请在location后面加上 location ~* /api/ { }这样的配置 不区分 api三个字母的大小写。

Nginx实现前端访问后端本地接口的更多相关文章

  1. Nginx解决前端访问资源跨域问题

    被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx ...

  2. nginx使用ngx_lua访问后端Thrift-Server实现和介绍

    背景 随着openresty的出现,让nginx使用lua解决一些业务的能力大幅度提高,ngx_lua可以使用nginx自生的基于事件驱动的IO模型,和后端的存储,业务等系统实现非阻塞的连接交互. 如 ...

  3. Spring Boot(一):入门篇+前端访问后端

    转自:Spring Boot(一):入门篇 什么是Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发 ...

  4. Nginx解决前端调用后端接口跨域问题

    1.项目中遇到的问题描述: 前端调用zuul统一网关服务接口,请求状态码200,但是无返回数据. 浏览器控制台报错信息:No  Access-Control-Allow-Origin header i ...

  5. 前端nginx时,让后端tomcat记录真实IP【转】

    对于nginx+tomcat这种架构,如果后端tomcat配置保持默认,那么tomcat的访问日志里,记录的就是前端nginx的IP地址,而不是真实的访问IP.因此,需要对nginx.tomcat做如 ...

  6. Nginx部署前端代码实现前后端分离

    实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...

  7. 通过nginx部署前端代码实现前后端分离

    实现前后端分离,可以让前后端独立开发.独立部署.独立单测,双方通过JSON进行数据交互. 对于前端开发人员来说,不用每次调试都需要启动或配置Java/Tomcat运行环境:对于后端开发人员来说 ,也不 ...

  8. SpringBoot + Vue前后端分离图片上传到本地并前端访问图片

    同理应该可用于其他文件 图片上传 application.yml 配置相关常量 prop: upload-folder: E:/test/ # 配置SpringMVC文件上传限制,默认1M.注意MB要 ...

  9. Keepalived+Nginx提供前端负载均衡+主从双机热备+自动切换

    原文链接:http://unun.in/linux/156.html 方案: 采用两台Nginx服务器作为前端,提供静态web内容,分发web请求,一主一从,Keepalived实现状态监测,保证 N ...

随机推荐

  1. PWN之Canary学习

    Canary 参考链接:https://ctf-wiki.github.io/ctf-wiki/pwn/linux/mitigation/canary-zh/ 0x1 简介: 用于防止栈溢出被利用的一 ...

  2. 利用ARP欺骗进行MITM(中间人攻击)

    ARP欺骗主要骑着信息收集得作用,比如可以利用欺骗获取对方流量,从流量分析你认为重要得信息 0X01  了解ARP Arp协议 ARP(Address Resolution Protocol,地址解析 ...

  3. List保持顺序去重

    Map<String, List<Bean>> orderMap = list.stream().collect(Collectors.groupingBy(Bean::get ...

  4. 理解一致性Hash算法

    简介 一致性哈希算法在1997年由麻省理工学院的Karger等人在解决分布式Cache中提出的,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CAR ...

  5. 牛客网剑指offer第13题——调整数组顺序使得奇数位于偶数前面

    题目来源:剑指offer 题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变 ...

  6. modules模块

    模块操作一 temp.js export var a='eternity'; index.js 跟temp.js同路径 import {a} from ./temp; 模块操作二 temp.js ex ...

  7. 通过vsphere给esxi添加本地硬盘

    公司ESXi服务器的硬盘空间不够使用,现在新加了一块硬盘在ESxi服务器上.在服务器上添加完硬盘后,在Vsphere上是看不到新加硬盘的. 下面我们来通过虚拟机模拟该情况,先添加一块硬盘.如下图: 在 ...

  8. go cap和len的区别

    首先要搞清楚容量和长度的区别:   容量是指底层数组的大小,长度指可以使用的大小   容量的用处在哪?在与当你用 appen d扩展长度时,如果新的长度小于容量,不会更换底层数组,否则,go 会新申请 ...

  9. Android记事本在菜单栏添加搜索按钮方法

    效果图 这个app结构和我之前将记事本开发的博客基本一致,我这里直接讲一下怎样添加 使用的开发软件为android studio 首先在res目录下新建文件夹menu,添加目录布局文件main_men ...

  10. cat基础用法

    Linux中的cat命令连接文件并打印到标准输出设备上(通常是shell).cat的最常见用法之一是显示文件,还可以即时创建文件,并可以直接在终端上进行基本编辑. 创建文件 使用cat命令创建文件,请 ...