利用nginx反向代理,解决前端跨域问题

简介: 利用nginx反向代理,解决前端跨域问题

第一步:


先下载nginx,下载地址:http://nginx.org/download/nginx-1.11.6.zip,我本地用的版本是1.11.6的。


下载后保存本地,解压文件夹。(文件夹名不要带中文)


image.png


第二步:


新建一个测试页面。图中为测试简单的POST请求接口。(这个接口目前是允许跨域的)

image.png



不满足浏览器的同源策略,因此会产生跨域问题。这里在接口做了跨域处理,所以可以调用成功~。


image.png


第三步:


先把接口的跨域处理去掉。注释图中的代码。


image.png


现在就出现了跨域问题了~,那下面来讲解如何解决跨域问题。



image.png

第四步:


现在我们来利用nginx 通过反向代理 满足浏览器的同源策略实现跨域。


1:想把文件放到nginx的html根目录里面


image.png


2:修改配置文件,打开conf文件夹下的nginx.conf


image.png


加上这两段代码


image.png


改好配置后,启动nginx服务。如图所示:


image.png


服务启动后:


然后打开浏览器 输入 http://localhost:8088/OSSDemo/Nginx.html 即可。这时候我们的地址就变成了8088了。而不是8020了。


image.png


第五步:


关键的一步来了。


现在我们来利用nginx 通过反向代理 满足浏览器的同源策略实现跨域。


然后我们回到nginx.conf 配置一个反向代理路径,如图所示


image.png


location /apis {

      rewrite  ^.+apis/?(.*)$ /$1 break;

      include  uwsgi_params;

      proxy_pass   http://localhost:6678;

}


保存,然后重新启动nginx服务。


image.png


把页面上请求接口的路径改成 /apis/Test/GetDateTime


http://localhost:6678/Test/GetDateTime =》 /apis/Test/GetDateTime


image.png


然后重新请求访问接口。


image.png


这样就完美解决了跨域问题了~~


1.由配置信息可知,我们让nginx监听localhost的8088端口,网站A与网站B的访问都是经过localhost的8088端口进行访问。


2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:6678”进行处理。


3.rewrite  ^/apis/(.*)$ /$1 break;


代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如/apis/a.html。只对/apis重写。


rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。


break代表匹配一个之后停止匹配。



简单的做了下笔记,写的不好的地方,请谅解~


相关文章
|
7天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
69 0
|
3天前
|
负载均衡 安全 应用服务中间件
nginx配置ssl和反向代理的配置代码
【5月更文挑战第2天】nginx配置ssl和反向代理的配置代码
20 3
|
7天前
|
域名解析 弹性计算 应用服务中间件
基于nginx反向代理实现OSS固定域名IP访问
本文基于阿里云OSS手册:https://help.aliyun.com/zh/oss/use-cases/use-an-ecs-instance-that-runs-centos-to-configure-a-reverse-proxy-for-access-to-oss,继续深入讨论如何利用nginx反向代理,实现固定的IP/域名访问OSS bucket。官方文档能够解决大部分的反向代理固定IP访问oss bucket的场景,但是对于必须使用域名作为endpoint的系统,会出现signatrue鉴权问题。本文继续在官方文档的基础上,将反向代理需要域名作为endpoint的场景补齐方案。
|
7天前
|
负载均衡 监控 Unix
[AIGC] Nginx:一个高性能的 Web 服务器和反向代理
[AIGC] Nginx:一个高性能的 Web 服务器和反向代理
|
7天前
|
负载均衡 JavaScript 前端开发
Nginx实现反向代理、负责均衡、动静分离
Nginx实现反向代理、负责均衡、动静分离
|
7天前
|
应用服务中间件 nginx
nginx进行反向代理的配置
在Nginx中设置反向代理的步骤:编辑`/etc/nginx/nginx.conf`,在http段加入配置,创建一个监听80端口、服务器名为example.com的虚拟主机。通过`location /`将请求代理到本地3000端口,并设置代理头。保存配置后,使用`sudo nginx -s reload`重载服务。完成配置,通过example.com访问代理服务器。
35 0
|
7天前
|
应用服务中间件 Nacos nginx
nacos 2.3.2模式 standalone 使用nginx 反向代理之后访问nacos控制台静
nacos 2.3.2模式 standalone 使用nginx 反向代理之后访问nacos控制台静
|
5天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
7天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
7天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0