解决跨域问题
跨域问题说明，参考【JS】AJAX跨域-JSONP解决方案（一）
实例，使用上一章（【JS】AJAX跨域-JSONP解决方案（一））的实例
解决方案三（被调用方支持跨域）
被调用方解决，基于支持跨域的解决思路，基于Http协议关于跨域的相关规定，在响应头里增加指定的字段告诉浏览器，允许调用
跨域请求是直接从浏览器发送到被调用方，被调用方在响应头里增加相关信息，返回到页面，页面能正常获取请求内容。
1、服务端增加一个过滤器（CrossFilter.java），过滤所有请求，在请求响应中增加内容，如下：
1 package com.test.ajax.cross.filter;
2
3 import java.io.IOException;
4
5 import javax.servlet.Filter;
6 import javax.servlet.FilterChain;
7 import javax.servlet.FilterConfig;
8 import javax.servlet.ServletException;
9 import javax.servlet.ServletRequest;
10 import javax.servlet.ServletResponse;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13
14 import org.springframework.util.StringUtils;
15
16 /**
17 * 服务端解决跨域
18 * @author h__d
19 *
20 */
21 public class CrossFilter implements Filter {
22
23 @Override
24 public void init(FilterConfig filterConfig) throws ServletException {
25 // TODO Auto-generated method stub
26
27 }
28
29 @Override
30 public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
31 throws IOException, ServletException {
32 HttpServletResponse res = (HttpServletResponse) response;
33
34 HttpServletRequest req = (HttpServletRequest) request;
35
36 // 支持所有域
37 String origin = req.getHeader("Origin");
38 if (!StringUtils.isEmpty(origin)) {
39 // 支持任何域名的跨域调用 且 支持带cookie（是被调用方域名的cookie，而不是调用方的cookie）
40 res.addHeader("Access-Control-Allow-Origin", origin);
41 }
42 // 指定允许的域，带cookie时，origin必须是全匹配，不能使用 *
43 // res.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
44 // 允许所有域，但不能满足带 cookie 的跨域请求
45 // res.addHeader("Access-Control-Allow-Origin","*");
46
47 // 支持所有自定义头
48 String headers = req.getHeader("Access-Control-Allow-Headers");
49 if (!StringUtils.isEmpty(headers)) {
50 // 允许所有header
51 res.addHeader("Access-Control-Allow-Headers", headers);
52 }
53 // 允许所有header
54 // res.addHeader("Access-Control-Allow-Headers","*");
55
56 // 指定允许的方法
57 // res.addHeader("Access-Control-Allow-Methods","GET");
58 // 允许所有方法
59 res.addHeader("Access-Control-Allow-Methods", "*");
60 // 允许浏览器在一个小时内，缓存跨域访问信息（即上面三个信息）
61 res.addHeader("Access-Control-Max-Age", "3600");
62 // 启用 cookie
63 res.addHeader("Access-Control-Allow-Credentials", "true");
64
65 chain.doFilter(request, response);
66
67 }
68
69 @Override
70 public void destroy() {
71 // TODO Auto-generated method stub
72
73 }
74
75 }
2、在web.xml文件中注册过滤器
<filter>
<filter-name>CrossFilter</filter-name>
<filter-class>com.test.ajax.cross.filter.CrossFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CrossFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3、编辑测试界面，test3.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script src="jquery-1.11.3.min.js" type="text/javascript"></script>
7 </head>
8 <body>
9 <h2>测试服务端解决跨域问题</h2>
10 <a href="#" onclick="get()">发送get请求</a>
11 </body>
12 <script type="text/javascript">
13 function get(){
14 $.getJSON("http://localhost:8080/test-ajax-cross/test/get").then(function(result){
15 console.log(result);
16 $("body").append("<br>" + JSON.stringify(result));
17 });
18 }
19 </script>
20 </html>
4、在浏览器中输入地址进行访问，http://a.com:8080/test-ajax-cross/static/test3.html
解决方案四（被调用方支持跨域）
原文地址：https://www.cnblogs.com/h--d/p/11478967.html
时间： 2024-10-12 22:25:08