网上很的文章说跨域问题,但都是从理论上来说,我这篇从demo开始
重现跨域Demo步骤
- 起2个tomcat
- 在第1个tomcat的webapp下建立文件夹app1,在app1里新建立一个index.jsp,内容如下
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$.get("http://127.0.0.1:8081/app2/index.jsp",function(data){
alert("Data Loaded: " + data);
});
</script>
- 在第2个tomcat的webapp下建立文件夹app2,在app2里新建立一个index.jsp,内如如下
<%
response.getWriter().write("hahahaha");
response.getWriter().close();
%>
注意:第2个tomcat端口号改成 8081
- 启动2个tomcat,访问
http://127.0.0.1:8081/app1/index.jsp
,报错如下
Failed to load http://127.0.0.1:8081/app2/index.jsp: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.
这就是经典的跨域问题
- 如何解决
在第2个tomcat的index.jsp里改成
<%
response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8080");
response.setHeader("Cache-Control","no-cache");
response.getWriter().write("hahahaha");
response.getWriter().close();
%>
加入
response.setHeader("Access-Control-Allow-Origin", "*");
表示告诉浏览器放行。
跨域原因
重要的一点跨域是由浏览器产生的拦截。如果通过 java 去调用是不会产生跨域,换句话tomcat1中的app1去调用 tomcat2中的app2是不会产生问题的。如下,将第1个tomcat的index.jsp里代码改成如下,第2个tomcat 的index.jsp里的没有加response.setHeader("Access-Control-Allow-Origin", "*");
<%@ page import="java.io.*"%>
<%@ page import="java.net.*"%>
<%
URL url = new URL("http://127.0.0.1:8081/app2/index.jsp");
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
PrintWriter printWriter = null;
conn.setRequestMethod("POST");
//设置通用的请求属性
conn.setRequestProperty("accept", "*/*");
conn.setRequestProperty("connection", "Keep-Alive");
conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)");
conn.setDoOutput(true);
conn.setDoInput(true);
//获取URLConnection对象对应的输出流
printWriter = new PrintWriter(conn.getOutputStream());
//发送请求参数即数据
printWriter.print("");
//缓冲数据
printWriter.flush();
//获取URLConnection对象对应的输入流
InputStream is = conn.getInputStream();
//构造一个字符流缓存
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String str = "";
while ((str = br.readLine()) != null) {
//写入到页面
response.getWriter().write(str);
}
is.close();
//断开连接,最好写上,disconnect是在底层tcp socket链接空闲时才切断。如果正在被其他线程使用就不切断。
//固定多线程的话,如果不disconnect,链接会增多,直到收发不出信息。写上disconnect后正常一些。
conn.disconnect();
response.getWriter().close();
%>
浏览器拦截的依据
浏览器产生的拦截的依据是同源策略,
协议,域名,端口号 三者有任意1个不同就会被认为是不同源。例如上面
http://127.0.0.1:8080/app1/index.jsp
http://127.0.0.1:8081/app1/index.jsp
就是端口不同而产生的。
假如把app1和app2放在一个 tomcat里是不会产生问题的。
再回到上面例子中看http里的request 和response
request
response
注意到在ajax请求的request header里有个origin,表示是从什么url发起的请求。
reponse header里有Access-Control-Allow-Origin:*
浏览器拦截的依据应该就在于此。Access-Control-Allow-Origin表示告诉浏览器任何域名都放行,否则就拦截。如果 Access-Control-Allow-Origin: http://127.0.0.1:8080
表示origin是http://127.0.0.1:8080
才放行。
还有1点需要注意是只要是src的就不会产生跨域问题。
例如index.jsp里
<iframe src="
http://127.0.0.1:8081/app1/index.jsp"/>
,jsonp就是利用了这个src不限制来绕过浏览器的拦截。
springboot 中的解决方案
spring mvc的cors
提供了好几种解决方案。无论如何配置,原理都是上面的原理。
- 方案1. 通用配置
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://domain2.com")
.allowedMethods("PUT", "DELETE")
.allowedHeaders("header1", "header2", "header3")
.exposedHeaders("header1", "header2")
.allowCredentials(true).maxAge(3600);
// Add more mappings...
}
}
- 方案2. @CrossOrigin
@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
...
}
- 方案3. 加filter
@Bean
public CorsFilter corsFilter(){
CorsConfiguration config = new CorsConfiguration();
// Possibly...
// config.applyPermitDefaultValues()
config.setAllowCredentials(true);
config.addAllowedOrigin("http://domain1.com");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
CorsFilter filter = new CorsFilter(source);
}