如果觉得对你有帮助,能否点个赞或关个注,以示鼓励笔者呢?!博客目录 | 先点这里
1.同源策略
同源策略是浏览器的一种安全策略,违背同源策略就是跨域 同源:协议,域名,端口号必需完全相同
一个URL 由如下组成
2.后端解决跨域问题
2.1目标方法加上 @CrossOrigin
@RequestMapping("/getUsername")
@CrossOrigin
public String getUsername(HttpSession session){
String username=(String) session.getAttribute("user");
return username;
}
2.2添加CROS过滤器
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}
2.3实现WebMvcConfigurer接口
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
3.Nginx解决跨域
3.1解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置
location / {
add_header Access-Control-Allow-Origin *;
}
3.2反向代理接口跨域
同源策略是浏览器的安全策略,不是HTTP 协议的一部分。 服务器端调用HTTP 接口只是使用HTTP 协议,不会执行JS 脚本,不需要同源策略,也就不存在跨越问题。
实现思路:通过Nginx 配置一个代理服务器(域名与domain1 相同,端口不同)做跳板机,反向代理访问domain2 接口,并且可以顺便修改cookie 中domain 信息,方便当前域cookie 写入,实现跨域登录。
#proxy服务器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时,可为*
add_header Access-Control-Allow-Credentials true;
}
}
4.其它跨域解决方案
前端常见跨域解决方案 传送门(点我)
总结:简单的跨域请求Jsonp 即可,复杂的CORS ,窗口之间JS 跨域postMessage ,开发环境下接口跨域用Nginx 反向代理或Node 中间件比较方便
|