CORS实现跨域资源访问

跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。

CORS的使用非常简单方便，只需要在服务端的响应头信息中设置Access-Control-Allow-Origin，如果浏览器检测到相应的设置，就可以允许Ajax跨域访问资源。

相对于JSONP的方式来实现跨域访问，CORS有如下的优点：

  1. JSONP只能实现GET请求，而CORS能够支持所有类型的HTTP请求。
  2. CORS允许开发者使用普通的Ajax请求来获取数据，比起JSONP有更好的错误处理，也更加的方便。

目前绝大多数浏览器都已经支持CORS了。其浏览器兼容情况如下：

具体实现如下:

服务端代码，一个简单的servlet，映射路径为http://192.168.30.150:8080/Scotch/register，具体如下：

 1 @Override
 2 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
 3         throws ServletException, IOException {
 4     resp.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
 5     String name = req.getParameter("name");
 6     JSONObject errors = new JSONObject();
 7     JSONObject data = new JSONObject();
 8     if (name ==null || name.isEmpty()) {
 9         errors.put("name", "Name is required.");
10     }
11         
12     if (errors.length() != 0) {
13         data.put("success", false);
14         data.put("errors", errors);
15     }else {
16         data.put("success", true);
17         data.put("message", "Success!");
18     }
19         
20     PrintWriter out = resp.getWriter();
21     out.print(data);
22     out.close();
23 }

客户端代码：

 1 $.ajax({
 2     url: "http://192.168.30.150:8080/Scotch/register",
 3     type: "POST",
 4     dataType: "json",
 5     data: {
 6         name: "clumiere"
 7     }
 8 }).then(function(response){
 9     console.info(response);
10 });

本地访问客户端页面，响应结果如下：

 

 

posted @ 2015-08-20 15:27  clumiere  阅读(643)  评论(0)  编辑  收藏  举报