跨域的应对之道

跨域的应对之道王忠阳什么是跨域？浏览器端请求不同域名的资源浏览器端只是浏览器的安全限制策略，CURL无此问题不同域名子域名也算，端口不同也算注意：Cookie只区分域名，不区分端口！问题的由来？AJAX前后端分离注：A.COM往B.COM提交表单，不算跨域解决方案：JSONP原理HTML中的script标签可以跨域加载，加载完成后立即执行。scriptsrc=“XXXX/XXXX.js”/script实现准备一个全局Function，比如callback123()动态增加一个scriptsrc=“API地址?callback=callback123/script返回的内容：callback123({DATA…})评价：JSONP浏览器兼容性：完美Cookie：支持仅指API域名下的Cookie能正常传递，你永远无法跨域获取Cookie问题：不支持POST，全局污染使用场景：无需POST的场景解决方案：CORS原理W3C新标准响应的头中只要包含Access-Control-Allow-Origin:域名1,域名2浏览器对这些域名就不会限制跨域还可以使用通配符*实现Server或nginx加Header评价：CORS浏览器兼容性：IE8以下支持不佳Cookie：无效问题：不能带Cookie使用场景：无需登录的API解决方案：CORS+原理W3C更新的标准Access-Control-Allow-Credentials:trueAccess-Control-Allow-Origin:域名这种情况不能使用通配符，且只能配一个域名（可通过nginx$http_origin解决）实现Server或nginx加Header前端XMLHttpRequest设置withCredentials=true评价：CORS+浏览器兼容性：IE11以下支持不佳Cookie：支持问题：浏览器兼容性差使用场景：对浏览器兼容要求不高的场景其它过气的方案FlashiFrame我们现在的方案没有一个方案最完美最完美的方案是不跨域nginx支持按URL正则进行不同的配置location^~/api/{proxy_pass}la.livechart.cn/api/test/123-共享登录态Session存Cookie（加密），挂在livechart.cn的根域名下2个加密字段：userId，userIdMd5用于其它后台服务解析登录态，前台无法解析1个公开字段：userName只影响前台显示，不影响任何后台逻辑安全问题：CSRF攻击script,img标签都没有跨域限制，而且可以带Cookieimgsrc=解决方案关键操作只接受POST请求验证码检测请求Header中的Referer随机Token