JAVA | Java 解决跨域问题


Table of Contents


引言

我们在开发过程中经常会遇到前后端分离而导致的跨域问题,导致无法获取返回结果。跨域就像分离前端和后端的一道鸿沟,君在这边,她在那边,两两不能往来.

什么是跨域(CORS)

跨域(CORS)是指不同域名之间相互访问。跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略所造成的,是浏览器对于JavaScript所定义的安全限制策略。

什么情况会跨域

  • 同一协议, 如http或https
  • 同一IP地址, 如127.0.0.1
  • 同一端口, 如8080

以上三个条件中有一个条件不同就会产生跨域问题。

解决方案

前端解决方案

  1. 使用JSONP方式实现跨域调用;
  2. 使用NodeJS服务器做为服务代理,前端发起请求到NodeJS服务器, NodeJS服务器代理转发请求到后端服务器;

后端解决方案

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

具体方式

一、使用Filter方式进行设置

使用Filter过滤器来过滤服务请求,向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

  1. @WebFilter
  2. public class CorsFilter implements Filter {
  3. @Override
  4. public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
  5. HttpServletResponse response = (HttpServletResponse) res;
  6. response.setHeader("Access-Control-Allow-Origin", "*");
  7. response.setHeader("Access-Control-Allow-Methods", "*");
  8. response.setHeader("Access-Control-Max-Age", "3600");
  9. response.setHeader("Access-Control-Allow-Headers", "*");
  10. response.setHeader("Access-Control-Allow-Credentials", "true");
  11. chain.doFilter(req, res);
  12. }
  13. }

二、继承 HandlerInterceptorAdapter

  1. @Component
  2. public class CrossInterceptor extends HandlerInterceptorAdapter {
  3. @Override
  4. public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
  5. response.setHeader("Access-Control-Allow-Origin", "*");
  6. response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  7. response.setHeader("Access-Control-Max-Age", "3600");
  8. response.setHeader("Access-Control-Allow-Headers", "*");
  9. response.setHeader("Access-Control-Allow-Credentials", "true");
  10. return true;
  11. }
  12. }

三、实现 WebMvcConfigurer

  1. @Configuration
  2. @SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
  3. public class AppConfig implements WebMvcConfigurer {
  4. @Override
  5. public void addCorsMappings(CorsRegistry registry) {
  6. registry.addMapping("/**") // 拦截所有的请求
  7. .allowedOrigins("http://www.abc.com") // 可跨域的域名,可以为 *
  8. .allowCredentials(true)
  9. .allowedMethods("*") // 允许跨域的方法,可以单独配置
  10. .allowedHeaders("*"); // 允许跨域的请求头,可以单独配置
  11. }
  12. }

四、使用Nginx配置

  1. location / {
  2. add_header Access-Control-Allow-Origin *;
  3. add_header Access-Control-Allow-Headers X-Requested-With;
  4. add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
  5. if ($request_method = 'OPTIONS') {
  6. return 204;
  7. }
  8. }

五、使用 @CrossOrgin 注解

如果只是想部分接口跨域,且不想使用配置来管理的话,可以使用这种方式

在Controller使用

  1. @CrossOrigin
  2. @RestController
  3. @RequestMapping("/user")
  4. public class UserController {
  5. @GetMapping("/{id}")
  6. public User get(@PathVariable Long id) {
  7. }
  8. @DeleteMapping("/{id}")
  9. public void remove(@PathVariable Long id) {
  10. }
  11. }

在具体接口上使用

  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4. @CrossOrigin
  5. @GetMapping("/{id}")
  6. public User get(@PathVariable Long id) {
  7. }
  8. @DeleteMapping("/{id}")
  9. public void remove(@PathVariable Long id) {
  10. }
  11. }

Spring Cloud Gateway 跨域配置

  1. spring:
  2. cloud:
  3. gateway:
  4. globalcors:
  5. cors-configurations:
  6. '[/**]':
  7. # 允许跨域的源(网站域名/ip),设置*为全部
  8. # 允许跨域请求里的head字段,设置*为全部
  9. # 允许跨域的method, 默认为GET和OPTIONS,设置*为全部
  10. allow-credentials: true
  11. allowed-origins:
  12. - "http://xb.abc.com"
  13. - "http://sf.xx.com"
  14. allowed-headers: "*"
  15. allowed-methods:
  16. - OPTIONS
  17. - GET
  18. - POST
  19. - DELETE
  20. - PUT
  21. - PATCH
  22. max-age: 3600

注意: 通过gateway 转发的其他项目,不要进行配置跨域配置

有时即使配置了也不会起作用,这时你可以根据浏览器控制的错误输出来查看问题,如果提示是 response 中 header 出现了重复的 Access-Control-* 请求头,可以进行如下操作

  1. import java.util.ArrayList;
  2. import org.springframework.cloud.gateway.filter.GatewayFilterChain;
  3. import org.springframework.cloud.gateway.filter.GlobalFilter;
  4. import org.springframework.cloud.gateway.filter.NettyWriteResponseFilter;
  5. import org.springframework.core.Ordered;
  6. import org.springframework.http.HttpHeaders;
  7. import org.springframework.stereotype.Component;
  8. import org.springframework.web.server.ServerWebExchange;
  9. import reactor.core.publisher.Mono;
  10. @Component("corsResponseHeaderFilter")
  11. public class CorsResponseHeaderFilter implements GlobalFilter, Ordered {
  12. @Override
  13. public int getOrder() {
  14. // 指定此过滤器位于NettyWriteResponseFilter之后
  15. // 即待处理完响应体后接着处理响应头
  16. return NettyWriteResponseFilter.WRITE_RESPONSE_FILTER_ORDER + 1;
  17. }
  18. @Override
  19. public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
  20. return chain.filter(exchange).then(Mono.defer(() -> {
  21. exchange.getResponse().getHeaders().entrySet().stream()
  22. .filter(kv -> (kv.getValue() != null && kv.getValue().size() > 1))
  23. .filter(kv -> (
  24. kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN)
  25. || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS)
  26. || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS)
  27. || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS)
  28. || kv.getKey().equals(HttpHeaders.ACCESS_CONTROL_MAX_AGE)))
  29. .forEach(kv -> {
  30. kv.setValue(new ArrayList<String>() {{
  31. add(kv.getValue().get(0));
  32. }});
  33. });
  34. return chain.filter(exchange);
  35. }));
  36. }
  37. }

JAVA | Java 解决跨域问题的更多相关文章

  1. Java后台解决跨域问题

    首先说一下什么是跨域? JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.c ...

  2. java SSM 解决跨域问题

    什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个 ...

  3. Java Web解决跨域请求

    要知道跨域请求就要先了解同源策略,那么什么是同源?什么是不同源?简单来说就是,如果两个资源,包括HTML页面.JavaScript脚本.css样式,对应的协议.域名和端口完全相同,那么这两个资源就是同 ...

  4. java后端解决跨域

    1 package com.zys.boot_jeep.config; import org.springframework.context.annotation.Bean; import org.s ...

  5. JAVA联调接口跨域解决办法

    JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...

  6. Java解决跨域问题

    同源 URL由协议, 域名, 端口组成. 如果两个URL的协议, 域名, 端口相同, 那么这两个URL为同源. 同源策略 script, iframe, link 可以跨域加载一些静态资源, 比如脚本 ...

  7. 基于Java服务的前后端分离解决跨域问题

    导语:解决跨域问题,前后端都增加相应的允许跨域的代码段即可. 一.后端增加允许跨域的代码,可以在具体controler层加,最好是在filter中添加,这样添加一次就够了,不用在每个controler ...

  8. java解决跨域

    方法中response.setHeader("Access-Control-Allow-Origin", "https://ding.taozugong.com" ...

  9. Java工具类- 跨域工具类

    原本Spring MVC项目添加跨域: 在web.xml文件中配置: <!-- cors解决跨域访问问题 --> <filter> <filter-name>cor ...

随机推荐

  1. JS 时间获取 (常用)

    /** * 获取几天之前日期 */ daysAgo(dayNum = 0) { let myDate = new Date() let lw = new Date(myDate - 1000 * 60 ...

  2. Typescript node starter 2.Router Middleware

    Router 路由器对象是中间件和路由的一个独立实例.可以将它视为一个“迷你应用程序”,仅能够执行中间件和路由功能.每个Express应用程序都有一个内置的应用程序路由器. 路由器的行为类似于中间件本 ...

  3. NameNode和SecondaryNameNode(面试开发重点)

    NameNode和SecondaryNameNode(面试开发重点) 1 NN和2NN工作机制 思考:NameNode中的元数据是存储在哪里的? 首先,我们做个假设,如果存储在NameNode节点的磁 ...

  4. Vue管理系统前端系列五自定义主题

    目录 自定义主题 1.安装「主题生成工具」 2.安装白垩主题 3.新建颜色挑选组件 自定义主题 1.安装「主题生成工具」 由于主题工具需要依赖于 node-sass,而node-sass版本兼容性并不 ...

  5. Shell编程—图形化脚本

    1创建文本菜单 1.1普通的文本菜单 $ cat menu1 #!/bin/bash # simple script menu function diskspace { clear df -k } f ...

  6. Java算法——递归思想

    描述递归(recursion):程序调用自身的编程技巧. 递归满足2个条件:1)有反复执行的过程(调用自身)2)有跳出反复执行过程的条件(递归出口) 递归与栈的关系下面演示的是求n的阶乘 int Fa ...

  7. 【C艹】关于sort用法之重构cmp(comp)函数的笔记

    众所周知,balabalabalabala············. 所以掌握sort函数(库文件:<algorithm>)的用法还是很有必要的. 一般选手只会简单地用用sort排一排数组 ...

  8. jmeter将上一个接口的返回值作为下一个接口的请求参数

    接口响应结果,通常为HTML.Json格式的数据,对于HTML的响应结果的提取,可以通过正则表达式,XPath提取. 对于Json格式响应结果,可以通过正则表达式.JSON Extractor插件.B ...

  9. openssh一键升级脚本(测试成功)

    1 ssh版本检查 本文档针对于ssh版本低于7.0的系统,升级为openssh7.5 p1. ssh –V [root@kuajing-db3 ~]# ssh -V OpenSSH_5.3p1, O ...

  10. quartz表(11张)

    /* Navicat Premium Data Transfer Source Server : 本地连接 Source Server Type : MySQL Source Server Versi ...