实测 CORS 跨域访问之 Access-Control-Allow-Origin 多域名设置

最新推荐文章于 2024-08-20 10:51:49 发布

安冬的码畜日常

最新推荐文章于 2024-08-20 10:51:49 发布

阅读量4.7w

点赞数 2

分类专栏： Java学习文章标签： CORS 跨域访问多域名 Access-Control-Allow 实例

本文链接：https://blog.csdn.net/frgod/article/details/78747143

版权

Java学习专栏收录该内容

25 篇文章 1 订阅

订阅专栏

初学，表述不规范之处还望不吝赐教。

1、基本思路

　　在 Windows 主机与 Linux 虚拟机上同时启动 tomcat 服务器，分别模拟跨域的客户端和服务器端。当客户端（Windows）通过页面 ajax 请求服务器端（Linux）的数据时，如果请求头的 Origin 与响应头的 Access-Control-Allow-Origin 匹配成功，则传回 JSON 格式的请求数据；如果允许多个域名访问，则让 Origin 与一个域名数组（白名单）进行逐一比较，匹配成功则显示相应数据。

2、域名准备

（1）客户端域名：http://www.corsdemo.com:8080（即 127.0.0.1）

（2）服务器域名：http://192.168.92.88:8080

（3）实测任务描述：让客户端用两种域名（http://www.corsdemo.com:8080/ 和 http://localhost:8080/）实现 CORS 跨域访问服务器，并显示所需数据结果。

3、客户端准备

Windows：%CATALINA_HOME%\webapps\ROOT\DemoCORS.html

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CORS Demo</title>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(function(){
	$("#msg").click(function(){
		$.post("http://192.168.92.88:8080/DemoCORS/CorsServlet",function(data){
			alert(data);
			$("#msg").html("My name is " + data.name + ", at age of " + data.age + "," + 
					(data.isEngineer ? " an engineer" : "") + " from " + data.company);
		},"json");
	});
});
</script>
</head>
<body>
<h1>CORS Demo</h1>
<h2 id="msg">单击实现 CORS 跨域访问</h2>
</body>

4、服务器端准备

（1）Servlet：（Linux）%CATALINA_HOME%/DemoCORS/WEB-INF/classes/action/CorsServlet.java

@WebServlet("/CorsServlet")
public class CorsServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public CorsServlet() { super(); }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	String[] whiteList = {"http://www.corsdemo.com:8080", "http://localhost:8080"};
    	String myOrigin = request.getHeader("origin");
    	boolean isValid = false;
    	for( String ip : whiteList ) {
    		if( myOrigin != null && myOrigin.equals(ip) ){
    			isValid = true;
    			break;
    		}
    	}
    	response.setHeader("Access-Control-Allow-Origin", isValid ? myOrigin : "null");
    	
    	User user = new User("Andy", 28, "Google", true);
    	String data = new Gson().toJson(user);
    	response.setCharacterEncoding("UTF-8");
    	response.getWriter().print(data);
    }

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

（2）请求数据：（Linux）%CATALINA_HOME%/DemoCORS/WEB-INF/classes/entity/User.java

public class User {
	private String name;
	private int age;
	private String company;
	private boolean isEngineer;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getCompany() {
		return company;
	}
	public void setCompany(String company) {
		this.company = company;
	}
	public boolean isEngineer() {
		return isEngineer;
	}
	public void setEngineer(boolean isEngineer) {
		this.isEngineer = isEngineer;
	}
	public User(){}
	public User(String name, int age, String company, boolean isEngineer){
		this.name    	= name;
		this.age     	= age;
		this.company 	= company;
		this.isEngineer = isEngineer;
	}
}

5、运行结果

（1）通过 http://localhost:8080/打开：

（2）通过 http://www.corsdemo.com:8080/ 打开：

结论

客户端通过 http://www.corsdemo.com:8080/DemoCORS.html 或 http://localhost:8080/DemoCORS.html 均可以实现 CORS 跨域访问。

注意事项

1、Access-Control-Allow-Origin 不支持连续设置以逗号分隔的多个域名，如："domain1.com,domain2.com"；

2、请求头的 Origin 由浏览器自动指定，不可手动更改，但可以通过 request.getHeader("origin") 读取该值；

3、站点外打开网页文件，请求头的 Origin 为 null。例如在本地磁盘任意位置直接双击打开 DemoCORS.html，url 显示为：file:///E:/Java/DemoCORS.html，单击后 Origin 为 null，本例对这种情况也允许访问，因此可以正常显示数据。否则控制台会提示同源策略限制：