前端跨域问题及解决方案

同源策略

源

• window.origin或location.origin可以得到当源
• 源=协议 + 域名 + 端口号

如果有两个url的

• 协议
• 域名
• 端口号
• 完全一致，那么这两个url就是同源的

完全一致才算同源

同源策略定义

浏览器规定

• 如果JS运行在源A里，那么就只能获取源A的数据
• 不能获取源B的数据，即不允许跨域

浏览器的目的是保护隐私
黑客发送的页面里的JS请求几乎没有区别，（referer有区别）

简单定义：不同源的页面之间，不准相互访问数据

为什么可以跨域使用CSS、JS和图片等？

答：同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实并不知道其内容，我们只是在引用。

解法一：CORS

在AJAX中添加响应头Access-Control-Allow-Origin

解法二：JSONP

步骤

• A.com将数据写到A.json
• B.com用script标签引用/A.js
• A.js执行A.com事先定义好的window.xxx函数
• 通过window.xxx回调函数

JSONP是什么

答：在跨域的时候，有些浏览器不支持CORS，必须使用另外一种方式来跨域。于是请求一个JS文件，JS文件会执行一个回调，回调中有需要的数据。回调的名字可以随机生成，把这个名字以callback的参数传给后台，后台会把这个参数再返回给我们执行。

JSONP主要就是利用了script标签没有跨域限制的这个特性来完成的。
后端通过执行回调函数，以参数的形式将数据返回给前端。

优点：

• 兼容IE
• 可以跨域

缺点

• 由于是script标签，读不到AJAX那么精确的数据，不知道状态码等信息，只知道成功和失败
• 只能发GET请求，不支持POST