一个 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. DIOCP之开发流程图之Client

    本次分析开发流程图采用的是DIOCP群里的群友[彩蛋]所给的DEMO,依然是win7的画图作品. 本人分析认为:学习网络开发不同本地开发,首先你应该知道完整的开发流程即网络程序运行的先后顺序,有个整体 ...

  2. cordova常用资料源

    cordova的中文资料https://github.com/CordovaCn/CordovaCn 官方文档: http://cordova.apache.org/docs/en/latest/ E ...

  3. table的遍历

    1.for k,v in pairs (tbtest) do 这样的遍历顺序并不是tbtest中table的排列顺序,而是根据tbtest中key的hash值排列的顺序来遍历的 2.for k,v i ...

  4. Access批量操作

    鉴于C#要插5万条记录到Access很慢,在网上找了好久的资料,终于找到了比较有用的信息(转载自Bach)谢谢! 总结如下: 1.导出TXT:  select * into [data.txt] in ...

  5. double四舍五入,double四舍五入并转成string

    import java.math.BigDecimal; /** * 处理一些数据类型的方法的java类 * @author ljb * */public class NumberTools { /* ...

  6. android app上线后bug的处理

    app上线后,后期维护显得尤为重要,今天给大家分享一下app上线后出现bug后的解决方法 1.继承Application类,重写onCreate方法 import java.io.File; impo ...

  7. android 异步加载框架 原理完全解析

    一.手写异步加载框架MyAsycnTask(核心原理) 1.我为大家手写了一个异步加载框架,涵盖了异步加载框架核心原理. MyAsycnTask.java import android.os.Hand ...

  8. 《Linux多线程服务端编程:使用muduo C++网络库》上市半年重印两次,总印数达到了9000册

    <Linux多线程服务端编程:使用muduo C++网络库>这本书自今年一月上市以来,半年之内已经重印两次(加上首印,一共是三次印刷),总印数达到了9000册,这在技术书里已经算是相当不错 ...

  9. workflow createPath

    针对不同的流程,createpath不同,但是创建审批链,和创建表都有 1.GetUserInfoByListColumn 控件已创建的.先Rebuild,属性需要注意 2.CreateListIte ...

  10. PoEdu - C++阶段班【Po学校】- Lesson02_类与对象_第4天

    复习:上节作业讲解 注意点: 设计SetString()的时候,要注意重置原来的空间. char * SetString(const char *str) { _len = strlen(str); ...