一个 URL 大概包含的部分:scheme://host:port/path?#hash

比如一个 URL 为 http://www.xxx.com:8888/school/student.html,

那么 http 就是 scheme,www.xxx.com 就是 host,8888 就是 port,

什么是同源?

  如果两个 URL 的 “scheme://host:port” 内容一样,就叫同源。

什么是跨源访问?

  如果两个 URL 的 scheme、host、port 有任何一个不一样,就不同源。

  这时候,一个 URL 的脚本从另一个 URL 获取数据,就叫跨源访问。

针对跨院访问,W3C 提出了一个方案叫做 CORS(Cross-Origin Resource Sharing),不过,只有现代浏览器支持此方案。

  CORS 的工作方式:

  1)浏览器中当前页面的脚本请求另外一个服务器的数据时,浏览器在发起连接的数据报头中附加一个 Origin 报头,

    表明当前页面的来源,然后向另外一个服务器发起连接

  2)目标服务器接收到浏览器的连接请求后,如果接受请求,则在响应数据流的报头中添加一个

    Access-Control-Allow-Origin 报头,并给这个报头赋一个值,值为浏览器发过来的 Origin 报头值,

    或者为 “*”(表示此服务器运行任何跨站请求)。如果不接受请求,则不包含 Access-Control-Allow-Origin 报头。

  3) 浏览器接受到返回来的数据包进行解析,如果不包含 Access-Control-Allow-Origin 报头,则丢弃响应数据包。

关于 CORS 的论述,有一个老外大牛(Nicholas C. Zakas)的博客,可看下:

https://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

   对 web 前端开发人员来说,不用做任何事情,直接在JS中发起跨域访问就是了,只不过需要浏览器做一些事情,然后服务器也要支持。

-------------------------------------------------------------------------------------------------------------------------------------------------

介绍另外一种跨源访问解决方案:JSONP( JSON with Padding ),JSONP 与 CORS 不同,可以支持老的浏览器。

要使用 JSONP,首先在 HTML 页面中定义一个处理数据的函数:

  function processJSONP(data) {

    // process the data

  }

然后,我们向跨域服务器发起请求,并在查询字符串中加上 callback 参数以及表单数据,例如:

  http://www.xxx.com/order?callback=processJSONP&name=ssss&age=111

服务器像往常一样生成 JSON 数据,把 JSON 数据当作参数传给 callback 函数,最终创建一条 JavaScript 语句,

  例如:"processJSONP({'aster':'1','daff':'2','total':'5'});"

服务器同时还把响应内容的 content-type 设置成 “text/javascript”,浏览器知道收到的是 JavaScript 代码,就会执行它。

这实际上调用了我们前面定义的函数。

注意:不要随便使用 JSONP,只把它用在你信任的环境中,因为返回数据(JavaScript 语句)会被执行,

  所以,有可能会被注入恶意代码,产生安全问题。

JS 跨源请求的更多相关文章

  1. ArcGIS Server API for JavaScript调用错误:已阻止跨源请求:同源策略禁止读取位于......

    已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...

  2. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  3. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  4. 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin'

    vue+springboot项目 前端发送请求微信 URL:http:/.........(企业微信的路径) 请求成功,数据发送过去可以接收到,处理完毕后发送返回值给我 我这边前端网络响应处可以看到返 ...

  5. Spring Boot全局支持CORS(跨源请求)

    import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...

  6. 使用jsonp实现跨源请求

    jsonp 该技术用来实现跨源请求,即向协议.域名.端口号不同的服务器发送请求 通过使用 script 标签的 src 向服务器发送GET请求http://xxx/xxx?callback=callb ...

  7. [js]ajax-异源请求jsonp

    参考: http://www.cnblogs.com/whatisfantasy/p/6237713.html http://www.cnblogs.com/freely/p/6690804.html ...

  8. js 跨域请求原理及常见解决方案

    一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...

  9. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

随机推荐

  1. C#中Invoke 和 BeginInvoke 的区别

    Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...

  2. Android菜鸟成长记9 -- selector的用法

    在项目开发的时候,由于系统给出的控件不够美观,因此开发时领导常常要我更改下界面,用美工给的图片取代系统图片.开始时,我只是给按钮等设置一下背景图片,这样做虽然美观了,但界面看起来却比较死板,比如用户点 ...

  3. [python] Ubuntu 环境下安装 python3.5 + pip

    一般情况下先添加PPA,但是我添加PPA会报错: sudo add-apt-repository ppa:fkrull/deadsnakes ubuntu add-apt-repository: co ...

  4. C# 模拟键盘操作--SendKey(),SendKeys()

    模拟键盘输入就是使用以下2个语法实现的.SendKeys.Send(string keys);  //模拟汉字(文本)输入SendKeys.SendWait(string keys); //模拟按键输 ...

  5. 笔记007:对象——RegExp正则表达式对象

    1.RegExp 一个用于匹配的模式文本 用0个或多个修饰符描述的匹配模式细节 RegExp对象的创建形式 用内建构造器创建    var re = new RegExp("j.*t&quo ...

  6. AWT布局管理器

    布局管理器 容器内可以存放各种组件,而组件的位置和大小是由容器内的布局管理器来决定的.在AWT中为我们提供了以下5种布局管理器: ①   FlowLayout 流式布局管理器 ②   BorderLa ...

  7. Web项目中删错文件怎么办

    在开发过程中,有时会因为手误将文件错误删除,会造成很大的困惑,今天看到一个网友分享的一种可以恢复文件的方式特别好用,现在分享给大家. 1.首先在删除文件的路径下创建与原来文件名字相同的文件. 2.在文 ...

  8. http2协议翻译(转)

    超文本传输协议版本 2 IETF HTTP2草案(draft-ietf-httpbis-http2-13) 摘要 本规范描述了一种优化的超文本传输协议(HTTP).HTTP/2通过引进报头字段压缩以及 ...

  9. dojo布局(layout)

    使用BorderContainer和ContentPane实现布局 1.效果图如下: 2.HTML代码: <div id="appLayout" class="de ...

  10. 简单的XML操作类

    /// <summary> /// XmlHelper 的摘要说明. /// xml操作类 /// </summary> public class XmlHelper { pr ...