工作中,如何解决跨域问题?

2023-05-28 0 969

在前述工程项目中,其间端分为三个完全相同的工程项目,各别布署在完全相同的搜索引擎下,这也就会碰到布吕马难题了。

难道难题出现了,那要是关键在于去化解难题,在已经开始说软件系统前,他们有必要性介绍呵呵甚么是布吕马。

甚么是布吕马?

布吕马,是指应用程序无法继续执行其它中文网站的JAVA。它是由应用程序的相混思路导致的,是应用程序对JavaScript实行的安全可靠管制。

甚么是相混思路?

简而言之相混指的是:协定、搜索引擎、freenode都完全相同,假如有三个不完全相同,所以都亦然相混。

相混思路它是由 Netscape 明确提出的三个安全可靠思路,它是应用程序最核心理念也是最基本上的安全可靠机能,假如缺乏相混思路,则应用程序的恒定机能可能将单厢受到影响,那时大部份全力支持JavaScript的应用程序单厢采用那个策略。

应用程序在继续执行JAVA的这时候,单厢检查和那个JAVA归属于别的网页,即检查和与否相混,多于相混的JAVA才会被继续执行;而非相混的JAVA在允诺统计数据的这时候,应用程序会报三个极度,提示信息婉拒出访。

http://www.a.com/index.html 初始化 http://www.a.com/user.jsp 协定、搜索引擎、freenode都完全相同,相混。https://www.a.com/index.html 初始化 http://www.a.com/user.jsp 协定完全相同,非相混。http://www.a.com:8080/index.html 初始化 http://www.a.com:8081/user.jsp 路由器完全相同,非相混。http://www.a.com/index.html 初始化 http://www.b.com/user.jsp 搜索引擎完全相同,非相混。http://localhost:8080/index.html 初始化 http://127.0.0.1:8080/user.jsp 尽管localhost等同 127.0.0.1 但也亦然相混的。

相混思路管制的情形:

Cookie、LocalStorage 和 IndexDB 难以加载DOM 和 Js第一类难以赢得AJAX 允诺无法推送

特别注意:对像 img、iframe、script 等条码的 src 特性是例外情形,它是能出访非相混中文网站的天然资源的。

布吕马业务流程

工作中,如何解决跨域问题?

布吕马出访示例

假设有三个中文网站,A中文网站布署在:http://localhost:8080 即本地ip路由器8080上;B中文网站布署在:http://localhost:8081 即本地ip路由器8081上。

那时B中文网站的网页想去出访A中文网站的信息,网页显示如下:

工作中,如何解决跨域问题?

从错误信息能看出以上出现了布吕马难题!

怎样化解布吕马难题?

1、Filter过滤器

采用Filter过滤器来过滤服务允诺,向允诺端设置Response Header(响应头部)的

Access-Control-Allow-Origin特性声明允许布吕马出访。 @WebFilter public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throwsIOException, ServletException{ HttpServletResponse response = (HttpServletResponse) res; response.setHeader(“Access-Control-Allow-Origin”, “*”); response.setHeader(“Access-Control-Allow-Methods”, “*”); response.setHeader(“Access-Control-Max-Age”, “3600”); response.setHeader(“Access-Control-Allow-Headers”, “*”); response.setHeader(“Access-Control-Allow-Credentials”, “true”); chain.doFilter(req, res); } }

2、继承 HandlerInterceptorAdapter

@Component public class CrossInterceptor extends HandlerInterceptorAdapter { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { response.setHeader(“Access-Control-Allow-Origin”, “*”); response.setHeader(“Access-Control-Allow-Methods”, “GET, POST, PUT, DELETE, OPTIONS”); response.setHeader(“Access-Control-Max-Age”, “3600”); response.setHeader(“Access-Control-Allow-Headers”, “*”); response.setHeader(“Access-Control-Allow-Credentials”, “true”); return true; } }

3、实现 WebMvcConfigurer

@Configuration @SuppressWarnings(“SpringJavaAutowiredFieldsWarningInspection”) public class AppConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(“/**”) // 拦截大部份的允诺 .allowedOrigins(“http://www.abc.com”) // 可布吕马的搜索引擎,能为 * .allowCredentials(true) .allowedMethods(“*”) // 允许布吕马的方法,能单独配置 .allowedHeaders(“*”); // 允许布吕马的允诺头,能单独配置 } }

4、采用Nginx配置

location / { add_header Access-Control-Allow-Origin *; add_headerAccess-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; if ($request_method = OPTIONS) { return 204; } }

5、采用 @CrossOrgin 注解

假如只是想部分接口布吕马,且不想采用配置来管理的话,能采用这种方式

在Controller采用

@CrossOrigin @RestController @RequestMapping(“/user”) public class UserController { @GetMapping(“/{id}”) public User get(@PathVariable Long id) { } @DeleteMapping(“/{id}”) public void remove(@PathVariable Long id) { } }

在具体接口上采用

@RestController @RequestMapping(“/user”) public class UserController {@CrossOrigin @GetMapping(“/{id}”) public User get(@PathVariableLong id) { }@DeleteMapping(“/{id}”) public void remove(@PathVariable Long id) { } }

总结

前端软件系统

采用 JSONP 方式实现布吕马初始化;采用 NodeJS 服务器做为服务代理,前端发起允诺到 NodeJS 服务器, NodeJS 服务器代理转发允诺到后端服务器;

后端软件系统

nginx 反向代理化解布吕马服务端设置Response Header(响应头部)的Access-Control-Allow-Origin;在需要布吕马出访的类和方法中设置允许布吕马出访(如 Spring 中采用@CrossOrigin注解);继承采用Spring Web的 CorsFilter(适用于Spring MVC、Spring Boot);实现 WebMvcConfigurer 接口(适用于Spring Boot);

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务