利用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月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
4302 90
|
6月前
|
前端开发 JavaScript 安全
剖析跨域问题始末及其解决方案——前端必备交叉知识(一)
跨域问题是前端开发中的常见挑战,了解并掌握不同的跨域解决方案能帮助你更高效地进行开发工作。本文对同源策略、跨域以及解决跨域的三种方案: CORS、JSONP、代理等跨域技术进行了介绍。选择合适的跨域解决方案非常重要。 在实际开发中,推荐优先考虑使用 CORS,因为它是现代浏览器支持的标准,且安全性较高。如果服务器无法修改,则可以考虑使用代理。如果是特殊情况,可以使用 JSONP,但要注意安全性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错
|
10月前
|
负载均衡 监控 应用服务中间件
配置Nginx反向代理时如何指定后端服务器的权重?
配置Nginx反向代理时如何指定后端服务器的权重?
464 61
|
10月前
|
安全 应用服务中间件 网络安全
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
597 60
|
10月前
|
安全 应用服务中间件 网络安全
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
591 60
|
8月前
|
缓存 负载均衡 应用服务中间件
Nginx七层(应用层)反向代理:HTTP反向代理proxy_pass篇
通过使用Nginx的反向代理功能,可以有效地提高Web应用的性能、安全性和可扩展性。配置过程中需要注意不同场景下的具体需求,如负载均衡、SSL终止和缓存策略等。正确配置和优化Nginx反向代理可以显著提升系统的整体表现。
1356 20
|
8月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
389 1
|
9月前
|
缓存 Java 应用服务中间件
nginx的正向代理和反向代理以及tomcat
Nginx的正向代理和反向代理功能在不同的场景中具有重要作用,正向代理主要用于客户端访问控制和匿名浏览,而反向代理则用于负载均衡和高可用性服务。Tomcat作为Java Web应用服务器,与Nginx结合使用,可以显著提升Web应用的性能和稳定性。通过合理配置Nginx和Tomcat,可以构建高效、稳定和可扩展的Web服务架构。
346 11
|
10月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
163 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
9月前
|
存储 应用服务中间件 nginx
nginx反向代理bucket目录配置
该配置实现通过Nginx代理访问阿里云OSS存储桶中的图片资源。当用户访问代理域名下的图片URL(如 `http://代理域名/123.png`)时,Nginx会将请求转发到指定的OSS存储桶地址,并重写路径为 `/prod/files/2024/12/12/123.png`。
347 5