同源策略和几种常用的跨域资源访问的方式

Bug

Access to XMLHttpRequest at 'http://localhost:8080/GetUsers' from origin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Concepts

• 同源策略(same-origin-policy)限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
• CORS(Cross-Origin Resource Sharing)跨域资源共享是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
• CSRF(Cross Site Request Forgery)跨站请求伪造
• JSONP(JSON with Padding)

解决跨域资源访问的几种方式

• 在服务端设置响应头的Access-Control-Allow-Origin选项
  后端：

response.setContentType("text/json; charset=UTF-8");

response.setHeader("Access-Control-Allow-Origin", "*");   // 跨域访问
String retData = JSON.toJSONString(userList);   // userList为要返回的数据(object)，转换为JSON字符串。

PrintWriter writer = response.getWriter();
writer.write(retData);
writer.close();

浏览器端脚本：

$.ajax(url, {
    var url = "http://localhost:8080/GetUsers",
    dataType: 'json',
    success: function(result) {
        console.log("成功", result);
    },
    error: function(jq) {
        console.log("失败", jq);
    }
});

服务端设置响应头的Access-Control-Allow-Origin对客户端来说不现实，并且不够安全(对服务器而言)。
所以可以在客户端想办法解决：

• JSONP (JSON with Padding)
  JSON常用于数据传输，而JSONP用于解决跨域资源访问的问题。
  后端：

response.setContentType("text/json; charset=UTF-8");

String callback = request.getParameter("callback");
String retData = String.format("%s(%s)", callback, JSON.toJSONString(userList));

PrintWriter writer = response.getWriter();
writer.write(retData);
writer.close();

前端发送JSONP请求：
设置dataType: 'jsonp'，另设置jsonp，值为函数名称(会作为查询参数的名称)。

$.ajax({
    type: "get",
    url: "http://localhost:8080/GetUsers",
    dataType: "jsonp",  /* dataType: 设置返回的数据类型 */
    jsonp: "callback",  /* jsonp: jQuery生成查询参数对的参数名称paramName，默认为callback。 */
    success: function(result) {
        console.log("成功", result);
    },
    error: function(jq) {
        console.log("失败", jq);
    }
});

运行截图见：用AJAX发送JSONP请求解决跨域资源访问