浏览器跨域问题

问题原因

跨域是指从一个域名的网页去请求另一个域名的资源。浏览器出于安全的考虑，不允许不同源的请求：

解决方法

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

**CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。 **

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

Nginx设置

add_header 'Access-Control-Max-Age' 86400;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

对于IE8/9 需要使用jquery.xdomainrequest.min.js，并且添加相应header：

 proxy_set_header  'Content-Type' 'application/json; charset=utf-8';

并且设置：

JQuery.support.cors = true;

JSONP

JSONP和JSON好像啊，他们之间有什么联系吗？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）

JS例子：

<script type="text/javascript">
$.ajax({
    url:"http://localhost:20002/MyService.ashx?callback=?",   
    dataType:"jsonp",
    jsonpCallback:"person",
    success:function(data){
        alert(data.name + " is a a" + data.sex);
    }
 });
</script>

Java端：

@RequestMapping(value = "/test", method = RequestMethod.GET)
public @ResponseBody JSONPObject test(HttpServletResponse response, String callback) {
    Map<String, String> map = new HashMap<String, String>();
    map.put("aaa", "I'm Dreamlu！");
    return new JSONPObject(callback, map); //hellojsonp({"aaa":"I'm Dreamlu！"})
}

注意：JSONP需要服务端支持，不能简单的配置Nginx实现

反向代理

通过把非同源请求用同源代理的方式来饶过跨域限制。

proxy_pass http://xxxxx/xxx.do

比较

• CORS对浏览器有要求，但对前后端的技术实现无改变
• JSONP对浏览器没有要求，但其最终是通过GET方法访问服务，限制了数据大小，并且对服务端技术实现有很大依赖
• 反向代理对浏览器和技术实现均无要求，但限制了部署的灵活性