一、同源策略
1. 什么是同源策略？
同源策略是一种约定，它是浏览器最核心和最基本的安全功能，可以用于隔离潜在恶意文件，如果没有了同源策略，浏览器的正常使用将受到影响。
浏览器采用同源策略，禁止页面加载或执行与自身不同源的任何脚本。如果没有同源策略，那么恶意网页可以读取银行网站、网上商城等里面的用户信息，甚至篡改账号密码等。所以所有支持JavaScript的浏览器都采用了同源策略。
2. 同源：协议、域名、端口相同。只要有一个不同就称之为跨域。出现跨域浏览器就要报错。
以下是相对于http://www.a.com/home.html的同源检测
| http://www.a.com/index.html | 同源 |
| http://www.a.com:81/home.html | 不同源，端口号不同 |
| https://www.a.com/home.html | 不同源，协议不同 |
| http://www.b.com/home.html | 不同源，域名不同 |
二、解决跨域问题
由于浏览器为了安全采用了同源策略，但在一些情况下，我们不得不进行跨域，所以在解决跨域问题时，要绕过同源策略的限制。
CORS方法
CORS是一种白名单机制 ，CORS的请求成功与否取决于服务器是否同意当前域的请求，通过在服务器设置同意当前域的请求来实现跨域访问。在服务器的响应头部设置Access-Control-Allow-Origin:当前域或*
示例：
允许所有域都有访问资源的权限 Access-Control-Allow-Origin:* ; 允许http://www.abc.com有访问资源的权限 Access-Control-Allow-Origin:http://www.abc.com
JSONP方法
此方法利用了script标签的src属性，src属性具备跨域请求资源的能力。a.html请求b.js的数据，动态创建script标签，向服务器请求数据，请求地址后面的callback参数指定函数名。
a.html
function req(src){
let script = document.createElement("script");
script.src = src;
document.body.appendChild(script);
script.onload = function(){
document.body.removeChild(script);
}
}
function getData(data){
console.log(data); //从服务器拿到的数据data
}
box.onclick = function(){
req("http://www.a.com/b.js?callback = getData");
}
b.js
function getData({name:"张三"}) //返回的数据作为参数
前后端联合开发时，后端人员可以根据url里的callback参数确定函数名，从而将数据返回。