跨域问题,解决之道

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

跨域是什么

跨域问题,是由于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反向代理

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

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

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

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

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

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

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

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

跨域问题,解决方案-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反向代理的更多相关文章

  1. vue cli 解决跨域 线上 nginx 反向代理配置

    前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开 ...

  2. 前端跨域调请求 nginx反向代理

    用 本地pc的目录,请求192.168.3.246的接口,以/api为标识 运行命令: 启动 nginx -s start 重启 nginx -s relaod 停止 nginx -s stop 查看 ...

  3. 解决异地服务器接口访问跨域,node构建反向代理

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  4. Vue-cli 创建的项目配置跨域请求(通过反向代理)---配置多个代理--axios请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问 localhost:9000 或https://m.maoyan.com或http://image.b ...

  5. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  6. 前端解决跨域问题的终极武器——Nginx反向代理

    提到代理,分为:正向代理和反向代理. 正向代理:就是你访问不了Google,但是国外有个VPN可以访问Google,你访问VPN后叫它访问Google,然后把数据传给你. 正向代理隐藏了真实的客户端. ...

  7. vue.js及H5常见跨域问题解决方案

    一.原生H5跨域问题解决方案 1.live-server 代理解决 首先在有node.js环境下,打开命令行工具,输入 npm install live-server -g 全局安装全局安装 live ...

  8. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  9. nginx 反向代理,支持跨域,前后分离

    前端开发往往涉及到跨域问题,其中解决方案很多: 1.jsonp 需要目标服务器配合一个callback函数. 2.window.name+iframe 需要目标服务器响应window.name. 3. ...

随机推荐

  1. Spring源码加载BeanDefinition过程

    本文主要讲解Spring加载xml配置文件的方式,跟踪加载BeanDefinition的全过程. 源码分析 源码的入口 ClassPathXmlApplicationContext构造函数 new C ...

  2. 【CentOS7】常用命令

    [CentOS7]常用命令 转载:https://www.cnblogs.com/yangchongxing/p/10646640.html 目录 ========================== ...

  3. 16个Spring注解,你知道的有几个?

    @Controller 标识一个该类是Spring MVC controller处理器,用来创建处理http请求的对象.   @RestController Spring4之后加入的注解,原来在@Co ...

  4. 细解JavaScript ES7 ES8 ES9 新特性

    题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...

  5. IIS配置svc(IIS8中添加WCF支持几种方法小结)

    方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少 ...

  6. 微信小程序 wepy框架 之拦截器intercepter使用

    1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...

  7. 如何将hive表中的数据导出

    近期经常将现场的数据带回公司测试,所以写下该文章,梳理一下思路. 1.首先要查询相应的hive表,比如我要将c_cons这张表导出,我先查出hive中是否有这张表. 查出数据,证明该表在hive中存在 ...

  8. idea创建Maven版的ssm项目

    要使用idea创建一个maven项目,首先电脑安装maven,maven下载地址:http://maven.apache.org/download.cgi 1.打开idea,选择创建一个新项目,选择m ...

  9. Django的Form验证(2)

    Django的Form验证(2) Form的含义及作用: 用于验证用户请求数据合法性的一个组件(校验数据的合法性) Django的Form实现步骤: 创建一个验证用户请求的模板 from django ...

  10. 浅谈c#和lua的gc

    前提: 本文参考和借鉴相关博客,相关版权归其所有,我只是做一个归纳整理,所以本文没有任何版权 参考文献和书籍: CLR和.Net对象生存周期:   https://www.cnblogs.com/Wd ...