解决这一问题我们得知道什么是跨域问题= =
浏览器为了保证用户信息的安全,防止恶意网站窃取数据,实施同源策略。同源指的是协议、域名和端口都相同。如果请求资源和当前页面的源不同,浏览器就会觉得有安全风险。
例:
- http://csdn.com:8080/test1和https://csdn.com:8080/test1 此例就是请求协议不同而导致的跨域问题。
- http://csdn.com:8080/test1和http://cccc.com:8080/test1 此例就是域名不同而导致的跨域问题。
- http://csdn.com:80和http://csdn.com:8080 此例就是不同的端口而导致的跨域问题。
那么我们来看看这个问题怎么解决?
1.CORS(Cross-Origin Resource Sharing,跨源资源共享):
这是一种现代的、标准的跨域解决方案。在服务端设置响应头来允许特定的源进行跨域访问。
在 Java 中,例如使用 Spring Boot
框架,可以通过添加 @CrossOrigin
注解来实现:
@RestController
@CrossOrigin
public class **Controller {
// 控制器方法
}
2.JSONP(JSON with Padding):
这是一种较早的解决跨域问题的方法。通过动态创建<script>
标签,利用其可以跨域获取资源的特性来实现数据的传递。但它只支持 GET
请求,且安全性和数据类型支持有限。
function callback(data) {
// 处理获取到的数据
}
var script = document.createElement('script');
script.src = 'http://example.com/api?callback=callback';
document.body.appendChild(script);
3.添加跨域的过滤器或者拦截器
在开发环境中,如果使用的是spring进行开发的时候可以通过添加过滤器或拦截器的方式来进行跨域请求。
4.实现WebMvcConfigurer接口
WebMvcConfigurer
是 Spring 框架中的一个接口,用于自定义 Spring MVC 的配置。
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 配置允许跨域的路径
registry.addMapping("/api/**")
// 配置允许跨域的源(域名)
.allowedOrigins("http://example.com")
// 配置允许的请求方法
.allowedMethods("GET", "POST", "PUT", "DELETE")
// 配置允许的请求头
.allowedHeaders("*");
}
}