03- nginx反向代理解决前端跨域

摘要:
Nginx squit顺利关闭Nginx,保存相关信息,并按计划方式结束web服务。现在让我们通过配置ng反向代理来解决跨域问题!

总体介绍:

后端准备接口,前端点击事件请求接口,但是由于后端服务与前端运行环境非同源,就会产生跨域问题,其实后端可以设置cors响应头去解决,但是这里介绍的是通过nginx配置反向代理去解决跨域问题。

开始干吧~

1)后端准备工作:开一个本地端口号为9119的服务,用原生node和express都可以

03- nginx反向代理解决前端跨域第1张

2.把前端html页面放在nginx安装目录中的html目录中:

03- nginx反向代理解决前端跨域第2张

 看一下html的内容:通过点击事件触发接口请求,用到了fetch去读取。

03- nginx反向代理解决前端跨域第3张

 3)nginx配置:打开nginx安装目录中的confi文件夹,找到nginx.conf文件,配置就在这个文件中去写。

03- nginx反向代理解决前端跨域第4张

打开命令窗口

 1)启动nginx  ->    start nginx

2) 查看状态  -> tasklist /fi "imagename eq nginx.exe"   (如果有列表,说明启动成功)

3)nginx -s stop        快速关闭Nginx,可能不保存相关信息,并迅速终止web服务。
     nginx -s quit         平稳关闭Nginx,保存相关信息,有安排的结束web服务。

4)nginx -s reload      因改变了Nginx相关配置,需要重新加载配置而重载。(不用停止服务再重新启动服务,直接用这个就可以保存最新的更改)

每一次修改了配置都要去重载一下。

注意:如果通过查看状态后发现有时候进程启多了,通过上面的关闭也关不掉,这时候我们可以打开电脑上的任务管理,找到进程手动结束掉,再重新启动ng

03- nginx反向代理解决前端跨域第5张


启动nginx,默认90端口,由于cors.html已经放入ng安装目录中的html文件夹了,那么就输入localhost:90/cors.html访问把

结果可以看到:页面是出来了,但是我们点击触发点击事件的时候由于调了后端服务的接口,由于现在是在90端口上,去访问的是9119端口,所以就出现了跨域。

03- nginx反向代理解决前端跨域第6张

 

 好吧!现在让我们通过配置ng反向代理解决跨域问题把!先来补充下为什么会有跨域?反向代理如何解决跨域问题?

  - 1.同源策略是浏览器的一种保护机制,是浏览器的行为,跟js没有半毛钱关系。并不是前端和后端的问题。

  - 2.因为反向代理发生在服务端,服务器与服务器之间没有跨域这一说,所以nginx去帮我们代理前端请求,去访问前端请求的服务器,从而拿到数据返回给前端。


 

ng配置:由于nginx.config是总的配置文件,里面可能根据各种需求有大量的配置,为了保持配置文件的干净,我们通过引入的方式把我们需要的反向代理配置这部分功能通过include引入进去:

注意层级结构,与server平级。这个自定义配置也是在ng安装根目录,又新建了自己的配置目录,看路径就知道。

03- nginx反向代理解决前端跨域第7张

 查看自定义cors.conf的文件反向代理配置:

其实自定义引入的就是一个server,上面为什么引入的时候要与主文件server平级,因为主配置文件中可以有很多个server,每一个server就是一个单独的功能配置,就是通过一个个server组成的,反向代理需要配置 下图中三个地方,端口号也是需要的,因为每一个server都需要有一个自己的端口号,都用主配置文件的端口,那么主配置也有自己的server功能啊,又不是处理你这个反向代理的。

03- nginx反向代理解决前端跨域第8张

 好了代理配置完成后:cors.html的fetch 请求的路径也要改变下:原来是一个具体的地址(这样就还会直接去访问了),现在要包含关键字,nginx检索到这个关键字后,去通过8118端口去转发到真正的请求地址

03- nginx反向代理解决前端跨域第9张

 前端点击后请求的地址:由此可见,8118端口去代理你真正的接口了。可以看到返回的确实是我们服务器给准备的数据。

03- nginx反向代理解决前端跨域第10张03- nginx反向代理解决前端跨域第11张

 


最后,我们看一下最后的点击效果:出现名字

03- nginx反向代理解决前端跨域第12张

 大功告成!


两种跨域解决方式:

1)通过设置请求头的方式:

服务端 9119端口

03- nginx反向代理解决前端跨域第13张

 客户端; 80端口03- nginx反向代理解决前端跨域第14张

03- nginx反向代理解决前端跨域第15张

 因为携带的有自定义header头,后端需要设置两个请求头。一个是指定域名允许跨域,一个是指定头允许跨域。不带头的话,并且属于简单请求的话,就不需要设置。

2)通过反向代理

服务端 9119端口

 03- nginx反向代理解决前端跨域第16张

客户端:8118端口,代理到9119端口

03- nginx反向代理解决前端跨域第17张

 03- nginx反向代理解决前端跨域第18张

 由此可见,前者不但需要设置域名,还要设置头允许。反向代理呢管你携带头不头的,直接就给你通过了。


不做反向代理的也没有设置响应头的:发了两次请求:

1> 第一次options是200,但是响应只给了头不信息,请求时不带自定义头的信息

03- nginx反向代理解决前端跨域第19张

响应时就给了个头:

03- nginx反向代理解决前端跨域第20张

 请求时:是看不到设置的自定义那个头的

03- nginx反向代理解决前端跨域第21张

 第二次:连get请求都没有显示,就提示你错了

03- nginx反向代理解决前端跨域第22张

 再来看服务端设置完响应头成功的情况:

03- nginx反向代理解决前端跨域第23张

 - options请求跟没设置没啥变化

 - get请求 就能在request中看到我们自定义的那个头了

03- nginx反向代理解决前端跨域第24张

post请求也是两次:options还是返回头部信息,真正的post请求跟get的错误一个鸟样子

03- nginx反向代理解决前端跨域第25张post:03- nginx反向代理解决前端跨域第26张


再来看一下反向代理:

反向代理的话只触发了一次请求,虽然携带着自定义头,不管是get还是post请求,都没有触发options请求。

03- nginx反向代理解决前端跨域第27张

注意这里的请求接口是8118端口,我们的服务端接口是9119,这就是反向代理,就是没有触发OPTIONS请求。

 03- nginx反向代理解决前端跨域第28张

03- nginx反向代理解决前端跨域第29张

 说明反向代理厉害啊。一步到位。

免责声明:文章转载自《03- nginx反向代理解决前端跨域》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ios 网络开发(CFNetwork)uniapp 中出现 wx.config is not a function下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue前端导入excel表格并解析表格内数据

vue前端导入excel表格并解析表格内数据 需求 用户需要输入一系列的ip 如果ip过多手动输入太麻烦,所以用户可以把ip写入Excel表格,然后导入 为防止用户创建Excel表格时格式错误,所以我们提供一个模板供下载 插件 npm install xlsx --save 代码 HTML代码(用的是element-ui,不同前端框架获取到的对象可能...

前端使用node.js的http-server开启一个本地服务器

前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。本文是利用node.js中的http-server,开启本地服务,步骤如下:...

路由器原理及作用以及交换机

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程[1]  。路由工作在OSI参考模型第三层——网络层的数据包转发设备。路由器通过转发数据包来实现网络互连。虽然路由器可以支持多种协议(如TCP/IP、IPX/SPX、AppleTalk等协议),但是在我国绝大多数路由器运行TCP/IP协议。路由器通常连接两个或多个由IP子网或点到点...

海康摄像头如何通过SDK将视频在前端网页上进行播放?

市场上常见的海康、大华、宇视等网络摄像头只要支持RTSP协议,都可以接入到EasyNVR中,今天主要给大家分享海康摄像头如何通过SDK将视频在前端网页上播放。 海康摄像头如何通过SDK将视频在前端网页上播放 碰到这个问题的时候,很多开发者的初期思路是通过SDK接入海康摄像机IPCamera、硬盘录像机NVR的视频,并想办法在网页端显示。这种SDK接入的方法...

Nginx配置反向代理

客户端:物理机浏览器 Nginx服务器:22.233.23.128 安装nginx Tomcat服务器:22.233.23.129 安装tomcat 1、tomcat配置 在tomcat/webapps下新建一个test目录,在test目录下将自己的IP写到index.html中 [root@node1 test]# tree /usr/local...

Linux端口转发的几种常用方法

0x00 背景   端口转发是一个常用的功能,不管是在服务器运维还是在***领域,都需要用到。在近期遇到一个问题就是一个服务的端口不能进行配置,但是由于出口硬件防火墙的原因,为了不修改硬件防火墙的策略,所以只能在本地做端口转发。因此尝试和寻找了以下的几种方法。 0x01 iptables和firewall iptables   iptables是我第一个...