前端跨域访问

在互联网应用中:

  • 一个页面需要请求多个域名下的web服务端接口
  • 同时一个web服务接口可能会被很多不同域名下的页面请求。

一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案。
解决跨域的方式主要有两种:

1. JSONP

关于JSONP的基本概念就不多介绍了,现在在网上已经有很多解释。JSONP模式下前端Client可以跨域请求JSON文件,进而实现前端跨域请求其他服务器资源的目的。
目前在一些流行的JavaScript库中对JSONP和Ajax的支持方式在表现形式上非常相近,在代码中写法几乎都是相同的,但是JSONP与Ajax是完全不同的原理。JSONP是以请求文件数据的方式向服务器发出请求,而Ajax是使用XMLHttpRequest向服务器异步发出请求。

  • 优点
    JSONP并不需要浏览器特殊支持,可以说所有的浏览器都是支持JSONP请求的。而且目前各流行JavaScript类库对JSONP的支持已经很全面,开发中也比较方便。
  • 缺点
    但JSONP的请求只能是GET请求,因为在请求URL有长度限制,一般情况下只要不超过2000字符都是可以的(What is the maximum length of a URL?),主流浏览器所支持的长度也越来越放宽,基本是可以满足条件的。
    JSONP的web服务端接口因为无法限制接收指定域名的请求,因此在实际应用中需要在安全性方面进行更多限制,以避免接口数据泄漏。

2. CORS(Cross-origin resource sharing)

主要是通过定义浏览器与服务器之间共享内容的方式来实现跨域。
CORS通过新增一系列 HTTP 头(Access-Control-Allow-Origin,Access-Control-Expose-Headers,Access-Control-Max-Age,Access-Control-Allow-Credentials,Access-Control-Allow-Methods,Access-Control-Allow-Headers等),让服务器能声明那些来源可以通过浏览器访问该服务器上的资源。另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。

2.1 运行模式

如果只使用简单请求向服务器发出请求,则浏览器就不需要向服务器发送预请求,服务器端只需要在response中增加Access-Control-Allow-Origin就可以了,开发非常简单,在代码上和Ajax请求几乎没有区别。

简单请求:只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。不会使用自定义请求头(类似于 X-Modified 这种)。
但请求以如果 GET, HEAD 或者 POST 以外的方法发起请求。或者,使用 POST,但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求或者使用自定义请求头(比如添加诸如 X-PINGOTHER)时,浏览器就需要向服务器发送预请求,以确定服务器是否支持后续请求,如果支持,浏览器则继续发送后续Ajax请求。

2.2 JQuery支持CORS

$.ajax({
  //PUT 和DELETE  需要发送预请求
  type: ‘HTTP METHOD‘,//如GET  ,POST
  url: ‘cross-domain-url‘,
  contentType: ,

  xhrFields: {
    withCredentials: false
  },

  headers: {
  },

  success: function() {
  },

  error: function() {
  }
});

详细的使用参见HTTP访问控制(CORS)

2.3 与JSONP相比

CORS的开发更为简单,对安全性的控制更为灵活,且目前所有的现代浏览器都已经支持了CORS模式,CORS支持所有的HTTP Method类型,在Restful请求中可以实现跨域。

3. 跨域访问在点评的应用

在点评,很多功能采用动静分离的方式,在项目部署上也采用前端静态文件资源与后端web服务独立域名的方式进行;这种模式下,后端的HTTP 接口对于前端而言是一个服务接口;例如一个查询用户是否登录的接口,可能会被多个项目使用,因此就要求服务端接口支持跨域请求。
目前在点评中主要使用JSONP的方式来实现跨域请求;因为CORS算是一个新技术,因此还没有大规模使用,只会在一些不重要的功能中使用过。

References

JSONP
What is the maximum length of a URL?
CORS(Cross-origin resource sharing)
Cross-Origin Resource Sharing
HTTP访问控制(CORS)
JQuery CORS support IE‘s XDomainRequest object plugin

时间: 2024-08-02 02:46:03

前端跨域访问的相关文章

html5的postmessage实现js前端跨域访问及调用解决方案

关于跨域访问,使用JSONP的方法,我前面已经demo过了,具体见http://supercharles888.blog.51cto.com/609344/856886,HTML5提供了一个非常强大的API,叫postMessage,它其实就是以前iframe的进化版本,使用起来极其方便,这里举个实验例子: 我们依旧按照与上文相同的设定,假定我们有2个Domain Domain1: http://localhost:8080  它上面有个应用叫HTMLDomain1,并且有个页面叫sender.

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau

nodejs前端跨域访问

XMLHttpRequest cannot load http://localhost:3000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 上面是我学习nodejs中碰到的一个异常,下面有代码以及解决方案. 1)js文件代码 var http=require('http');var qu

解决傻瓜式前后端分离前端跨域访问的问题

版本号49之后的chrome跨域设置chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录.众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏.历史记录等个人信息.49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cook

前端的跨域访问解决方案!

方案一].json跨域访问问题,可以把json拷贝到当前服务器中来 错误提示信息:XMLHttpRequest cannot load http://www.runoob.com/try/angularjs/data/Customers_JSON.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefor

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

前端跨域问题解决方法

1.什么是跨域及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 跨域情况如下: url 说明 是否跨域 http://www.cnblogs.com/a.jshttp://www.a.com/b.js 不同域名 是 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

前端跨域的那些事

这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解, 一.为什么要跨域? 二.常见的几种跨域与使用场景 2.1 JSONP跨域 2.2 iframe跨域 2.3 window.name 跨域 2.4 document.domain 跨域 2.5 cookie跨域 2.6 postMessage跨域 三.总结 一.为什么要跨域 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略