跨域问题,解决方案-Nginx反向代理

摘要:
跨域问题,解决方案-Nginx反向代理方案三,搭建中间转发层(常用)跨域问题的核心是什么?当然,我们都是基于Nginx作为反向代理,所以当然是水到渠成。跨域问题,解决方案-Nginx反向代理当用户请求xx.720ui.com/server1的时候,Nginx会将请求转发给Server1这个服务器上的具体应用,从而达到跨域的目的。Nginx服务将真实物理服务器传回的数据转发给web端。

跨域问题,解决之道

跨域问题,在日常开发过程中,是一个非常熟悉的名词。今天的话题,结合我之前的项目场景,讨论下《跨域问题,解决之道》。

跨域是什么

跨域问题,是由于JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。换句话说,只有JavaScript存在跨域问题。

什么情况下会出现跨域

不同源访问,就算是跨域了哟。那什么才算同源呢?一般来说,同源,即同一来源,包括主机名、协议和端口号。

例如,

http://blog.720ui.com 和 http://docs.720ui.com ,是不同的二级域名,存在跨域问题。

http://blog.720ui.com 和 https://blog.720ui.com , 是不同的协议,存在跨域问题

http://blog.720ui.com 和 http://blog.720ui.com:4000 , 是不同的端口号,存在跨域问题。

http://blog.720ui.com/java/ 和 http://blog.720ui.com/about/, 虽然文件夹不同,但是是相同域名下,所以不存在跨域问题。

跨域问题普遍么

在现在前后端分离,微服务化之后,往往我们就存在许多不同的域名,这种情况下,就存在非常普遍的跨域问题。因此,跨域问题,在日常开发过程中,是一个非常熟悉的名词。那么,我们是如何去解决跨域问题呢?

解决之道

我们是如何去解决跨域问题呢?来吧,我们进入正题。

方案一,JSONP(废弃)

很早很早之前,我有个项目曾经使用过JSONP处理跨域问题。简单的理解,jsonp是带有回调函数callback的json,它是一个很棒的方案,可用于解决主流浏览器的跨域数据访问的问题。但是,JSONP方案的局限性在于,JSONP只能实现GET请求。随着现在RESTful的兴起,JSONP显得力不从心了。因为,RESTful不仅有GET,还存在POST、PUT、PATCH、DELETE。

方案二,CORS(常用)

CORS 全称为 Cross Origin Resource Sharing(跨域资源共享)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,但用户不会有感觉。因此,实现CORS通信的关键是服务端。服务端只需添加相关响应头信息,即可实现客户端发出 AJAX 跨域请求。

值得注意的是,浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。

我们绝大多数项目采取这个方案,实现细节,不再扩展,如果有疑问,可以关注公众号私信,或者评论留言哟。

但是,不幸的是,CORS不支持IE8、IE9,如果产品不再考虑兼容IE低版本的话,可以忽略,但是如果产品需要兼容目前国内还存在大量低版本的IE市场(百分之二十多),那么这个需要慎重考虑咯。

附图,留念。

跨域问题,解决方案-Nginx反向代理

跨域问题,解决方案-Nginx反向代理

方案三,搭建中间转发层(常用)

跨域问题的核心是什么?不同源访问。是啊,如果我们转换成同源请求,就不存在这个问题啦。

因此,我们之前有个项目,通过搭建中间层,当然可以是java,也可以是node.js,通过将服务端的请求进行转发,换句话说,就是dispatcher了一层,那么前端请求的地址,就被转发了,所以很好的解决跨域问题。

当然,如果对性能有考量的产品,就需要慎重选择这个方案咯,因为多了一层中间转发,不管是网络开销,还是性能负载都是有一定的影响。

方案四,Nginx反向代理(常用)

首先,产品需要搭建一个中转nginx服务器,用于转发请求。当然,我们都是基于Nginx作为反向代理,所以当然是水到渠成。

那么,Nginx的思路,就是通过Nginx解析URL地址的时候进行判断,将请求转发的具体的服务器上。

说个思路,可能有点晕,我画个图,大家就理解了。

跨域问题,解决方案-Nginx反向代理

跨域问题,解决方案-Nginx反向代理

当用户请求xx.720ui.com/server1的时候,Nginx会将请求转发给Server1这个服务器上的具体应用,从而达到跨域的目的。

总结

跨域问题,在日常开发过程中,是一个非常熟悉的名词。我们在开发过程中,或多或少都与它打过交道,因此,今天的话题,结合我之前的项目场景,以及JSONP、CORS、中间转发层、Nginx反向代理四个方案进行总结,讨论下《跨域问题,解决之道》。

解决思路

跨域问题,是由于JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。如果,我们将不同的域名整合到一个域,换句话说,通过子目录的方式划分,是不是就能解决跨域问题呢?那么,Nginx反向代理的思路,就是通过Nginx解析URL地址的时候进行判断,将请求转发的具体的服务器上。

解决跨域问题

自定义本地的url请求规则 ,如 http://www.720ui.com/blog 则对应要nginx服务转发到http://blog.720ui.com 。

配置 nginx.conf 文件,将本地带有特定前缀的URL接口请求转发到要跨域的真实物理服务器上。

Nginx服务转发请求到真实物理服务器。Nginx服务将真实物理服务器传回的数据转发给web端。

关注我:私信回复“java架构”获取往期Java高级架构资料、源码、笔记、视频

Dubbo、Redis、设计模式、Netty、zookeeper、Spring cloud、分布式、

高并发等架构技术

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

上篇实际环境----心跳网卡延迟高的问题排查在C#中利用Nuget包使用SQLite数据库和Linq to SQLite下篇

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

相关文章

Vue-CLI 3.x 设置反向代理

最近在项目中使用了Vue CLI 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程。 新建配置文件 (vue-cli3.x官网的配置文档 https://cli.vuejs.org/zh/config/#devserver-proxy) 在项目的根目录下新建vue.config.js文件,自Vue CLI 3开始,项目中所有的配置...

nginx的反向代理缓存

假设有两台物理机,他们分属于不同的域名,以webgame的游戏运营商和开发商为例,运营商需要获取游戏中的排行数据,开发商为了过多对游戏服务器的请求,会在发起请求的机器上设置缓存(或是让运营商定时过来抓取一次数据) nginx设置web缓存,需要用到的相关指令: 1、proxy_cache 2、proxy_cache_path 3、proxy_cache_v...

Vue+Flask部署到阿里云服务器

本文用于记录自己在阿里云部署Vue+Flask组合的详细过程。 在阿里云部署Vue+Flask组合的前提是已经在自己电脑上成功部署,参考:https://minatsuki-yui.github.io/2018/01/04/vue&flask/?from=timeline 阿里云ECS建网站基础配置,参考:https://www.jianshu.c...

解决nginx反向代理webservice的soap:address location问题

原文:https://blog.csdn.net/mn960mn/article/details/50716768 一:首先来发布一个web service package com.ws.service;public interface IUserService{ public String getUserName(String id);}package...

squid反向代理基本概述及性能事项

一、基本概念 squid反向代理作web加速是大型网站的常用模式。1. squid来自于1990的cache harvest项目。这个项目一个分支形成squid,另一个形成netapp的netcache产品(netapp的netcache是固化在其硬件产品中的,整体价格很贵) 2.squid是硬盘缓存,其使用内存作缓存内容的索引(一个索引在32位系统中大小...

.net core2.2 利用Nginx反向代理在Ubuntu下部署

一、需要给ubuntu安装.netcore的环境 我这儿使用的是Ubuntu18.04,安装的是.net core 2.2 wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb sudo dpkg -i packages-micros...