跨域的简介与解决方案.docx

跨域的简介与解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
一、什么是同源？
同源是指域名、协议和端口均相同。
二、什么是跨域？
跨域是指一个域下的文档或脚本试   
 
   
跨域的简介与解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
一、什么是同源？
同源是指域名、协议和端口均相同。
二、什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源（只要域名、协议和端口有任一个不同，就被当作是跨域）
JavaScript 出于安全方面的考虑，不允许跨域调用其它页面的对象
几种常见场景：
不同文件： 调用 （非跨域）
不同域名： 调用 （跨域）
不同协议： 调用 （跨域）
不同端口： 调用 :81/（跨域）
三、跨域解决方案
1、proxy（服务器代理）
A 客户端访问 A 服务器，并在 A 服务器上做代理访问 B 服务器，然后把请求结果返回 A 客户端，即实现了 A 客户端请求 B 服务器的跨域
2、CORS（跨域资源共享）
什么是 CORS
是 Cross-Origin Resource Sharing（跨域请求资源共享全称），是一种跨域资源请求机制
CORS 的使用
需要被请求方的服务端设置： Access-Control-Allow-Origin
// 客户端
$.ajax({url:":1234/",success:function (data) {
$("div").text(data)
}})
// 服务器
var http=require('http');
(function (req,res) {
("Access-Control-Allow-Origin","*");
("OK");
}).listen(1234);
3、JSONP
什么是 JSONP
全称是 JSON with padding（填充式 json），是应用 JSON 的一种新方法，也是一种跨域解决方案
JSONP 的原理
所有具有 src 属性的 HTML 标签都是可以跨域的，包括 <script> <img> <iframe>，所以可以把一些资源放到第三方服务器上，然后可以通过对应标签的 src 属性引用
JSONP 的使用
首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。
服务器先生成 json 数据。将 json 数据直接以入参的方式，放置到 callback 中，这样就生成了