什么是跨域和同源

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

判断条件

1. 协议是否相同（http、https、file）
2. 主机地址是否相同（www.xxx.com 127.0.0.1）
3. 端口（0~65535）http默认的端口号是80（可以省略），https默认端口是443 ， MySQL默认的端口是3306

如果两个url协议、主机地址、端口都相同，那么这两个url是同源，否则就是非同源

非同源受到限制：

• Cookie无法操作
• DOM无法操作
• Ajax请求无效（请求可以发送，服务器也会处理这次请求，但是响应结果会被浏览器拦截）

跨域问题的解决方案

(1)服务端CORS方法

CORS——跨域资源共享"（Cross-origin resource sharing）

以一个例子来说明：

• 服务器的8888端口发送了一个html

• 但是在html里面向8887端口发送了请求【跨域了】
  
• 浏览器访问localhost：8888，控制台出现报错，cors policy阻止了这个跨域请求，因为没有设置’Access-Control-Allow-Origin这个请求头
  
• 这个时候其实请求是发出去了的，但是，浏览器看到response头里面没有acao的请求头，知道了这个跨域请求其实是不被允许的，所以就会拦截他，【浏览器跨域限制】
  
• 设置响应头了以后：response.writeHead(200, { “Access-Control-Allow-Origin”: “*” });就没有报错了，请求成功
  

优点

1、CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

(2)客户端解决方案JSONP（JSON with padding）

原理：有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像淘宝等大型网站，肯定会将这些静态资源放入cdn（）中，然后在页面上连接，如下所示，所以它们是可以链接访问到不同源的资源的。

CDN（Content delivery networks）缓存，网关缓存、【反向代理缓存】

• 1)<script type="text/javascript" src="某某cdn地址" ></script>
• 2)<link type="text/css" rel="stylesheet" href="某个cdn地址" />
• 3)<img src="某个cdn地址" alt=""/>

而jsonp就是利用了script标签的src属性是没有跨域的限制的，通过创建script标签（link，img），通过src（ref）来访问服务器，这个没有跨域的限制从而达到跨域访问的目的。

例子：

• jquery也支持jsonp的实现方式

callback是必须的，callback是什么值要跟后台拿。获取到的jsonp数据格式如下：

• 获取到的jsonp数据格式如下：上面的数据中，flightHandler就是那个padding.
  

不足

• 【只能使用get方法】，不能使用post方法：script，link, img 等等标签引入外部资源，都是 get 请求的，那么就决定了 jsonp 一定是 get 的。
• 【没有关于 JSONP 调用的错误处理】。如果动态脚本插入有效，就执行调用；【如果无效，就静默失败】。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。