1、什么是跨域
跨域问题产生的原因，是由于浏览器的安全机制，JS只能访问与所在页面同一个域（相同协议、域名、端口）的内容（参考js的同源策略）。
但是我们项目开发过程中，经常会遇到在一个页面的JS代码中，需要通过AJAX去访问另一个服务器并返回数据，这时候就会受到浏览器跨域的安全限制了。
这里要注意，如果只是通过AJAX向另一个服务器发送请求而不要求数据返回，是不受跨域限制的。浏览器只是限制不能访问另一个域的数据，即不能访问返回的数据，并不限制发送请求。
2、跨域解决方案
jsonp
Web页面上调用js文件时不受是否跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
三步走：创建script、指定src,插入到文档。
jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称，就可以用下面的形式来就加载JSON数据。
jQuery.getJSON(url + "callback=?", function(data) {
alert(data.a + data.b);
});
服务端当然也要提供JSONP的支持，其实只要提供读写callback这个params就可以了。
跨域资源共享（CORS）
Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
CORS与JSONP相比，更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器， 我们可以限制域，比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持，比如 AWS 支持跨域资源分享功能CORS，向S3上传不需要代理。
Web前端开发所涉及的内容主要包括W3C标准中的结构、行为和表现，那么这三项中我们需要掌握的核心技能是什么呢？1.开发语言HTML发展历史有二十多年，历经多次版本更新，HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单，不就是制作网页嘛，其实不然，web前端需要掌握的核心语言xHTML+CSS+JavaScript，JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄自封精通。由于JavaScript与html的差异性，以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成的。小公司因为需要压缩成本，就要求每个人会的越多越好，如果您想往项目经理发展，能懂一两门后台语言，绝对是锦上添花！2.浏览器兼容性互联网目前主流浏览器有IE6\7\8\9，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯TT，360，theWorld等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的，如果你身边有老网虫喜欢收藏浏览器，你翻翻他的硬盘，相信几十款肯定是有的。每种内核对代码的解析是不完全一样的，即使同样内核也可能存在很大差异，如IE和遨游版的IE。不说非主流的浏览器，就主流的浏览器要做到完全兼容，也并非易事，需要长时间的积累和测试，需要前端开发工程师对前端开发的热爱和激情。目前移动互联网的发展趋势也不容小觑，将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时，试想一下，走在某地风景很好，拍下来后自动分享给各路好友，因此手机上的浏览器兼容也看刻不容缓，现在手机上的浏览器也是纷繁复杂，主流的UCWEB，safari，IE，3G门户的，以及symbian低端机的“残缺儿童”，包括国外流行手机我们不知道的一些浏览器，更糟糕的是这些浏览器解析因为手机硬件的不同，每个浏览器得到的结果都是完全不同的。3.hack技术由于不同的浏览器对CSS的解析认识不一样，因此会导致生成的页面效果不一样，这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSShack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。4.业内标准目前Web前端开发中提到最多的就是W3C标准，这是一系列标准的集合，代表了互联网发展的方向，也代表了前端开发的一种信仰。写的代码都要100%通过标准验证，为通过标准验证而感到自豪，会有效推动互联网的快速发展。5.开发工具目前比较流行的是Dreamweaver，其曾经风靡一时，到现在也没有退出历史舞台，证明DW还是有很大优势的，尤其是针对初学者，其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局，但现在更提倡的是纯手写代码，既体现技能方面的卓越，也可有效避免使用DW等工具产生的冗余代码。此外再掌握一些photoshop技能，即使没有美工，也能简单处理一些图像。小结，掌握以上技能，可以说你是一个合格的前端开发人员，能够参与到一个大的项目中，或者自己独立写出一个网页。虽然这看起来和网页制作设计差不多，从效果上来看，都是制作网页的，但实际上，技术上所超出的已经是好几个档次的东西了。
Cross-Origin Resource Sharing，跨域资源共享，简称 CORS。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。跨域资源共享是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。
简言之，CORS就是为了让AJAX可以实现可控的跨域访问而生的。
由于有同源策略，跨域请求是被禁止。
我们需要在服务器端设置允许不同域的请求。
Apache配置方法
Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的Directory，Location，Files或VirtualHost的配置里加入以下内容即可
Header set Access-Control-Allow-Origin *
PHP配置方法
header("Access-Control-Allow-Origin:*");
以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性地设置安全的来源
我们发现，Web页面上调用js文件时不受是否跨域的影响，凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe。那就是说如果要跨域访问数据，就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据，而且JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称，就可以用下面的形式来就加载JSON数据。
url?callback=?
jQuery.getJSON(url + "callback=?", function(data) {
alert(data.a + data.b);
});
服务端当然也要提供JSONP的支持，其实只要提供读写callback这个params就可以了。
跨域资源共享（CORS）
Cross-Origin Resource Sharing (CORS) 是W3c工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。
CORS与JSONP相比，更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器， 我们可以限制域，比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持，比如 AWS 支持跨域资源分享功能CORS，向S3上传不需要代理。
在 Web 服务器做出响应时，为了提高安全性，在 HTTP 响应头中可以使用的各种响应头字段。
X-Frame-Options
该响应头中用于控制是否在浏览器中显示 frame 或 iframe 中指定的页面，主要用来防止 Clickjacking （点击劫持）攻击。
X-Frame-Options: SAMEORIGIN
DENY 禁止显示 frame 内的页面（即使是同一网站内的页面）
SAMEORIGIN
允许在 frame 内显示来自同一网站的页面，禁止显示来自其他网站的页面
ALLOW-FROM origin_uri 允许在 frame 内显示来自指定 uri 的页面（当允许显示来自于指定网站的页面时使用）
X-Content-Type-Options
如果从 script 或 stylesheet 读入的文件的 MIME 类型与指定 MIME 类型不匹配，不允许读取该文件。用于防止 XSS 等跨站脚本攻击。
X-Frame-Options: nosniff
X-XSS-Protection
用于启用浏览器的 XSS 过滤功能，以防止 XSS 跨站脚本攻击。
X-XSS-Protection: 1; mode=block
0 禁用 XSS 过滤功能
1 启用 XSS 过滤功能
Content-Security-Policy
用于控制当外部资源不可信赖时不被读取。用于防止 XSS 跨站脚本攻击或数据注入攻击（但是，如果设定不当，则网站中的部分脚本代码有可能失效)。
之前的字段名为 X-Content-Security-Policy
Content-Security-Policy: default-src 'self'
default-src ‘self’：允许读取来自于同源（域名+主机+端口号）的所有内容
default-src ‘self’
*.example.com：允许读取来自于指定域名及其所有子域名的所有内容
X-Permitted-Cross-Domain-Policies
用于指定当不能将地crossdomain.xml地文件（当需要从别的域名中的某个文件中读取 Flash 内容时用于进行必要设置的策略文件）放置在网站根目录等场合时采取的替代策略。
X-Permitted-Cross-Domain-Policies: master-only
master-only 只允许使用主策略文件（/crossdomain.xml）
Strict-Transport-Security
用于通知浏览器只能使用 HTTPS 协议访问网站。用于将 HTTP 网站重定向到 HTTPS 网站。
Strict-Transport-Security: max-age=31536; includeSubDomains
max-age 用于修改 STS 的默认有效时间。
includeSubDomains 用于指定所有子域名同样使用该策略。
Access-Control-Allow-Origin等CORS相关字段
当使用 XMLHttpRequest 从其他域名中获取资源进行跨域通信时使用。
Access-Control-Allow-Origin:
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-TRICORDER
Access-Control-Max-Age: 1728
上述代码用于设定与 进行跨域通信处理，允许使用 POST, GET, OPTIONS 方法，在发送的请求头中添加 X-TRICORDER 字段，通信超时时间为1,728,00秒。
HTTP响应头的设定方法
在 Apache 服务器中指定响应头时，需要在 httpd.conf 文件中将下述模块设定为有效状态。
LoadModule headers_module modules/mod_headers.so
然后使用下述方法设定 HTTP 响应头。
Header set HeaderFieldName "value"
//例如
Header set X-XSS-Protection "1; mode=block地
我来说两句