利用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代表匹配一个之后停止匹配。



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


相关文章
|
6天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
19天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
nginx配置反向代理404问题
|
16天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
38 4
|
1月前
|
负载均衡 应用服务中间件 Linux
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
这篇博客文章详细介绍了Nginx的下载、安装、配置以及使用,包括正向代理、反向代理、负载均衡、动静分离等高级功能,并通过具体实例讲解了如何进行配置。
149 4
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件,很全
|
1月前
|
缓存 前端开发 应用服务中间件
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
139 7
|
1月前
|
应用服务中间件 nginx
nginx反向代理与证书设置
nginx反向代理与证书设置
42 3
|
1月前
|
负载均衡 算法 应用服务中间件
nginx反向代理与负载均衡
nginx反向代理与负载均衡
37 1
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
298 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
33 4
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
133 2