跨域问题的产生背景
早期为了防止CSRF（跨域请求伪造）的攻击，浏览器引入了同源策略(SOP)来提高安全性。
所谓同源策略：即域名、端口、协议相同，才能互相获取对应的资源，在同源策略下，域名A可以获取域名B下的脚本，图片等，但不能发送ajax请求，也不能操作Cookie、LocalStorage等数据。同源策略的存在，一方面提高了网站的安全性，但同时在面对前后端分离、模拟测试等场景时，也带来了一些麻烦。
跨域是由于浏览器的同源策略产生的，所以服务器不受影响。
JS跨域
指的是在浏览器端利用浏览器的一些特性进行hack处理，从而避开同源策略的限制。
常用的方法是JSONP
由于同源策略不会阻止动态脚本的插入到文档中去，所以催生出了一种很常用的跨域方式： JSONP。
原理：在域名a.com获取b.com的数据，我们动态插入来源于b.com的脚本；
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.b.com/getdata?callback=demo';
这里，我们利用动态脚本的src属性，变相地发送了一个http://www.b.com/getdata?callback=demo的GET请求。这时候，b.com页面接受到这个请求时，如果没有JSONP,会正常返回json的数据结果，像这样：
{ msg: 'helloworld' }
而利用JSONP,服务端会接受这个callback参数，然后用这个参数值包装要返回的数据：
demo({msg: 'helloworld'});
这时候，如果a.com的页面上正好有一个demo 的函数：
function demo(data) {
console.log(data.msg);
}
当远程数据一返回的时候，随着动态脚本的执行，这个demo函数就会被执行，从而拿到了b.com的数据。
到这里，你应该能明白这个技术为什么叫JSONP了吧？就是因为使用这种技术服务器会接受回调函数名作为请求参数，并将JSON数据填充进回调函数中去。
服务器跨域
在实践过程中，一般我们喜欢让服务器来多做一些处理，从而尽可能让前端简化。
这里将介绍两种常用的方法：反向代理和CORS。
反向代理：一般我们会用nginx作为web服务器，通过简单的设置即可实现代理。
CORS ： "跨域资源共享"（Cross-origin resource sharing）是W3C出的一个标准。
未完，待续...
网友评论