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 {@Beanpublic 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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS").allowCredentials(true)//是否允许携带Cookie.maxAge(3600)//3600s之类浏览器不会再次询问.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中间件比较方便

【JavaWeb】跨域问题的多种解决方案相关推荐

网站跨域问题的多种解决方案
1.什么是网站跨域跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名. 2.网站跨域报错案例 jquery-1.7.2.min.js?t=2017-07-27:4 Faile ...
iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
浏览器跨域问题以及常用解决方案
浏览器的同源策略跨域的根本原因就是因为浏览器的同源策略,这是浏览器出于安全性考虑做出的限制,所谓同源是指:域名.协议.端口相同. 比如在互联网上有两个资源(网页或者请求等),如果A想要访问B的资源, ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案
CORS也已经成为主流的跨域解决方案,不过CORF也会引发CSRF,本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个 ...
跨域的原因以及解决方案
# 为什么会产生跨域问题浏览器限制,目前所有浏览器都实现了同源策略规范. 请求方式Type为xhr.如果非xhr,如json,script则也不会存在跨域问题请求方与服务方的源不同,即跨域,包括: ...
前端经常遇到的跨域问题几种解决方案
跨域(非同源策略请求) 同源策略请求 ajax/fetch 跨域传输部署到同一个web服务器上:同源策略 xampp 修改本地的host文件 127.0.0.1:1234 http://api.qq ...
同源策略、跨域以及跨域的三种解决方案详解
浏览器并非限制了http发起的请求,跨域请求可以正常发起,但是返回结果会被浏览器拦截. CORS的核心就在于让服务器来确定是否允许跨域访问. 1.服务器代理: 2.cors跨域资源共享: 3.JSO ...
前端跨域问题汇总及解决方案
"关注前端开发社区 ,回复" 1" 即可加入前端技术交流群,回复 " 2" 即可免费领取500G前端干货! 来源 | https://seg ...

【JavaWeb】跨域问题的多种解决方案

文章目录