前言
在前后端分离项目中,经常会遇到跨域问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下,一起来看看吧~
什么是跨域
当一个请求的url的协议、域名、端口任意一个与当前页面的url不同即为跨域。
比如 a页面想获取b页面的资源,a与b页面的协议、域名或端口号不同,进行的访问行为都是跨域,由于浏览器的同源策略,会限制跨域请求资源。
同源策略由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同":
- 协议相同
- 域名相同
- 端口相同
同源策略确保一个应用中的资源只能被本应用的资源访问。
非同源限制
- cookie、localStorage、indexDB无法读取
- DOM和js对象无法获取
- 无法发送Ajax请求
Java 中的跨域问题指的是在使用 Ajax 技术进行跨域访问时,由于浏览器的安全限制,导致请求被拒绝或者无法获取到正确的响应结果。
解决 Java 中的跨域问题可以采用以下几种方式:
1、通过设置响应头信息来支持跨域访问。
在 Java 中可以通过设置响应头信息来支持跨域访问,例如在 Spring MVC 中可以使用
//@CrossOrigin 注解来设置允许跨域访问的源地址:
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping("/api")
@RestController
public class ApiController {
// ...
}
2、使用 iframe 来实现跨域访问。
可以通过在同一页面中使用 iframe 元素来实现跨域访问,从而避免了浏览器安全限制。例如在前端页面中可以通过以下方式来获取来自不同域名的数据:
var iframe = document.createElement('iframe');
iframe.src = 'http://exampleURL.com/data';
iframe.style.display = 'none';
document.body.appendChild(iframe);
var data = iframe.contentWindow.document.body.innerText;
console.log(data);
或前端发送ajax请求
$("#test").click(function(){
$.ajax({
url : "http://localhost:8082/hello.cors",
type : "GET",
success : function(result){
// alert(result);
console.log(result)
}
})
})
3、使用 WebSocket 来解决跨域问题。
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyWebSocketHandler(), "/data").setAllowedOrigins("*");
}
}
4、HttpServletResponse添加头信息
@RestController
public class CorsController {
@RequestMapping(value = "/hello.cors")
public String hello(HttpServletResponse response){
response.addHeader("Access-Control-Allow-Origin","http://localhost:8081");
//response.addHeader("Access-Control-Allow-Credentials","true");
return "hello cors";
}
}
5、通过配置类解决跨域
使用HttpServletResponse对象或注解方式,需要在每个需要跨域的方法上都加上相应的注解或参数,我们想让所有的controller都添加跨域功能,我们可以通过实现WebMvcConfigurer接口来自定义跨域配置。
WebMvcConfigurer是一个接口,提供很多自定义的拦截器,例如跨域设置、类型转化器等springMVC的配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
/**
* **addMapping**:配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径。
*
* **allowedMethods**:允许所有的请求方法访问该跨域资源服务器,如:POST、GET、PUT、DELETE等。
*
* **allowedOrigins**:允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容,如:”[http://www.address.com](http://www.address.com/)“,只有该域名可以访问我们的跨域资源。
*
* **allowedHeaders**:允许所有的请求header访问,可以自定义设置任意请求头信息。
* @param registry
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*.cors")
.allowedOrigins("http://localhost:8081")
.allowedMethods("POST","GET")
.maxAge(1000);
}
}