在前后分离的架构下,跨域问题难免会遇见比如,站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。
网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。
出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。
例如,XMLHttpRequest和Fetch API遵循同源策略。
这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非使用CORS头文件。
跨域的体现,在于它的域名不同或者端口不同,但要注意以下的形式为非跨域模式
http://www.example.com/index.html ==> http://www.example.com/login.html
二、Spring Boot跨域(@CrossOrigin)当然这里虽然指SpringBoot但是SpringMVC也是一样的,要求在Spring4.2及以上的版本
1、@CrossOrigin使用场景要求jdk1.8+
Spring4.2+
2、@CrossOrigin源码解析(翻译参考网络,文末列出参考地址)
@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@documented
public @interface CrossOrigin {
String[] DEFAULT_ORIGINS = { "*" };
String[] DEFAULT_ALLOWED_HEADERS = { "*" };
boolean DEFAULT_ALLOW_CREDENTIALS = true;
long DEFAULT_MAX_AGE = 1800;
@AliasFor("origins")
String[] value() default {};
@AliasFor("value")
String[] origins() default {};
String[] allowedHeaders() default {};
String[] exposedHeaders() default {};
RequestMethod[] methods() default {};
String allowCredentials() default "";
long maxAge() default -1;
}
3、@CrossOrigin使用
Spring Boot下的请求处理控制器
package com.example.demo.controller;
import com.example.demo.domain.User;
import com.example.demo.service.IUserFind;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
@RestController
//实现跨域注解
//origin="*"代表所有域名都可访问
//maxAge飞行前响应的缓存持续时间的最大年龄,简单来说就是cookie的有效期 单位为秒
//若maxAge是负数,则代表为临时cookie,不会被持久化,cookie信息保存在浏览器内存中,浏览器关闭cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
@Resource
private IUserFind userFind;
@GetMapping("finduser")
public User finduser(@RequestParam(value="id") Integer id){
//此处省略相应代码
}
}
后台返回的数据
前端跨域请求
demo
这样就解决了跨域问题,获取了后台的数据
参考
跨域 HTTP 请求
补充:springboot的@CrossOrigin("*")跨域仍然失效
项目中偶尔遇到即使加了@CrossOrigin跨域失败:
第一次遇到时间有限没解决:前端直接添加跨域处理。
jQuery.support.cors = true;
后续第二次遇到该问题,作为后端不能让前端解决跨域问题。
debug详细查找原因:发现在自定义拦截器返回失败,跨域失败。
明白该问题:需要以下知识。
(mvc拦截器的链路模式)
(Cors拦截器加载)
(自定义的拦截器加载)
(拦截器的加载顺序)
因为拦截器是链路模式:CrossOrigin也是拦截器在自定义拦截器之后。所以在自定义拦截器失败后,处理
跨域的拦截器未处理,造成跨域失败。
解决该问题的办法:添加filter ,因为Filter优先于拦截器执行,所以自己创建的拦截器不会影响跨域处理。
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
UrlbasedCorsConfigurationSource configSource = new UrlbasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
二:springboot升级到2.2.0,在新版本的springmvc中,把cors拦截添加到了拦截器的第一位,所以不会有该问题。
如果允许可以直接升级springboot或mvc版本。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持考高分网。如有错误或未考虑完全的地方,望不吝赐教。



