JS 跨源请求

一个 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 语句）会被执行，

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