跨域解决方案之二->CORS解决跨域

跨域解决方案之二-->CORS解决跨域

前面简单介绍了JSONP解决跨域访问，顺便将看到的另一种跨域解决方案CORS（Cross-Origin Resource Sharing）即跨域资源共享作以简单介绍。

CORS，是一种服务器端的跨域解决方案，这种方案对于跨域的解决代码均在服务器端设置完成。在服务器端接收到客户端的请求后，通过获取到请求的来源站点Origin，如果愿意将资源共享给该站点，则通过设置“Access-Control-Allow-Origin”报头的值为请求的来源站点。浏览器接收到包含资源的响应后，会提取“Access-Control-Allow-Origin”响应报头的值，如果此值为*或者包含的源列表包含请求的源站点，则浏览器会允许JavaScript操作获取的资源；否则，不会操作获取的资源。

关于CORS解决跨域的相关理论可以参考CORS（跨域资源共享），在此处就不做深入介绍。主要介绍一下CORS的具体应用。

CORS解决跨域，是在后端做简单设置，下面是做的简单测试：

前端部署在http://localhost:8086/容器中，访问的url是http://localhost:8086/testWeb/testCORS.html，代码如下：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"  src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"  src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			type : "get",
			url : "http://localhost:8080/testApp/testCORSServlet",
			dataType : "json",
			success : function(data) {//客户端jquery预先定义好的callback函数,
				//成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
				alert(JSON.stringify(data));
			},
			error : function() {//数据加载失败
				alert("fail");
				error.apply(this, arguments);
			}
		});
	
	})
</script>
</head>
<body>
	this is the first page.....
</body>
</html></span>

后端使用servlet，部署在http://localhost:8080/下，

web.xml配置如下：

<span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>testApp</display-name>
  <welcome-file-list>
    <welcome-file>/testServlet</welcome-file>
    <welcome-file>index.htm</welcome-file>
  </welcome-file-list>
  <servlet>
     <servlet-name>testCORSServlet</servlet-name>
    <servlet-class>com.founder.servlet.TestCORSServlet</servlet-class>
  </servlet>
   <servlet-mapping>
    <servlet-name>testCORSServlet</servlet-name>
    <url-pattern>/testCORSServlet</url-pattern>
  </servlet-mapping>
</web-app></span>

TestCORSServlet代码如下：

<span style="font-size:18px;">package com.founder.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
/**
 * 测试CORSservlet
 */
public class TestCORSServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		Map<String,String> map=new HashMap<String,String>();
		map.put("name", "sherry");
		JSONObject json=JSONObject.fromObject(map);
		String s=json.toString();
		//start-CORS跨域设置
		String origin=req.getHeader("Origin");//得到请求页面所在站点
		if(origin!=null&&!origin.equals("null")){//跨域
			resp.setHeader("Access-Control-Allow-Origin", origin);//允许当前请求访问服务
			resp.setHeader("Access-Control-Allow-Credentials", "true");//设置服务端支持带用户凭证的请求，只有在服务端
		//显式支持用户凭证的情况下，携带了用户凭证的请求才会被认为是有效的
		}else{//当前域
			resp.setHeader("Access-Control-Allow-Origin", "*");
		}
		//end-CORS跨域设置
		System.out.print(origin);
		resp.getWriter().write(s);

	}

}</span>

所有支持以下layout engines的浏览器均支持CORS：（翻译自http://en.wikipedia.org/wiki/Cross-origin_resource_sharing#cite_note-10）

Gecko1.9.1（如Firefox 3.5，SeaMonkey 2.0， Camino 2.1）及以上版本；
Webkit（如Google Chrome3 以上版本，Safari 4以上版本等）；
MSHTML/Trident6.0(IE 10),MSHTML/Trident 4.0&5.0(IE 8& 9，需要借助XDomainRequest对象)；
Presto（Opera 12.00和Opera Mobile12均实现了CORS，但是Opera Mini不支持）

跨域解决方案之二->CORS解决跨域

相关推荐