面试突击之跨域问题的解决方案详解

2024-08-20 08:24:26

跨域问题指的是不同站点之间，使用 ajax 无法相互调用的问题。跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。 但这个保护机制也带来了新的问题，它的问题是给不同站点之间的正常调用，也带来的阻碍，那怎么解决这个问题呢？接下来我们一起来看。

1.跨域三种情况

在请求时，如果出现了以下情况中的任意一种，那么它就是跨域请求：

协议不同，如 http 和 https；
域名不同；
端口不同。

也就是说，即使域名相同，如果一个使用的是 http，另一个使用的是 https，那么它们也属于跨域访问。常见的跨域问题如下图所示：

2.跨域问题演示

接下来，我们使用两个 Spring Boot 项目来演示跨域的问题，其中一个是端口号为 8080 的前端项目，另一个端口号为 9090 的后端接口项目。

2.1 前端网站

前端项目只需要在 resources 下放两个文件，一个用于发送 ajax 请求的 jquery.js，另一个是 html 前端页面，工程目录如下图所示：

其中前端页面 index.html 的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域测试页面</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<h1>跨域测试</h1>
<div>
    <input type="button" onclick="mySubmit()" value=" 发送跨域请求 ">
</div>
<script>
    function mySubmit() {
        // 发送跨域请求
        jQuery.ajax({
            url: "http://localhost:9090/test",
            type: "POST",
            data: {"name": "Java"},
            success: function (result) {
                alert("返回数据：" + result.data);
            }
        });
    }
</script>
</body>
</html>
复制代码

2.2 后端接口

后端接口项目首先先在 application.properties 配置文件中，设置项目的端口号为 9090，如下所示：

server.port=9090

然后创建一个后端控制器，返回一个 JSON 格式的数据，实现代码如下：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;

@RestController
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test() {
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

以上两个项目创建并启动成功之后，使用前端项目访问后端接口，因为端口不一样，所以也属于跨域访问，运行结果如下图所示：

3.解决跨域问题

在 Spring Boot 中跨域问题有很多种解决方案，比如以下 5 个：

使用 @CrossOrigin 注解实现跨域；
通过配置文件实现跨域；
通过 CorsFilter 对象实现跨域；
通过 Response 对象实现跨域；
通过实现 ResponseBodyAdvice 实现跨域。

当然如果你愿意的话，还可以使用过滤器来实现跨域，但它的实现和第 5 种实现类似，所以本文就不赘述了。

3.1 通过注解跨域

使用 @CrossOrigin 注解可以轻松的实现跨域，此注解既可以修饰类，也可以修饰方法。当修饰类时，表示此类中的所有接口都可以跨域；当修饰方法时，表示此方法可以跨域，它的实现如下：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;

@RestController
@CrossOrigin(origins = "*")
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test() {
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

以上代码的执行结果如下图所示：

从上图中可以看出，前端项目访问另一个后端项目成功了，也就说明它解决了跨域问题。 优缺点分析 此方式虽然虽然实现（跨域）比较简单，但细心的朋友也能发现，使用此方式只能实现局部跨域，当一个项目中存在多个类的话，使用此方式就会比较麻烦（需要给所有类上都添加此注解）。

3.2 通过配置文件跨域

接下来我们通过设置配置文件的方式就可以实现全局跨域了，它的实现步骤如下：

创建一个新配置文件；
添加 @Configuration 注解，实现 WebMvcConfigurer 接口；
重写 addCorsMappings 方法，设置允许跨域的代码。

具体实现代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration // 一定不要忽略此注解
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

3.3 通过 CorsFilter 跨域

此实现方式和上一种实现方式类似，它也可以实现全局跨域，它的具体实现代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration // 一定不能忽略此注解
public class MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {
        // 1.创建 CORS 配置对象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOriginPattern("*");
        // 是否发送 Cookie
        config.setAllowCredentials(true);
        // 支持请求方式
        config.addAllowedMethod("*");
        // 允许的原始请求头部信息
        config.addAllowedHeader("*");
        // 暴露的头部信息
        config.addExposedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 对象
        return new CorsFilter(corsConfigurationSource);
    }
}

3.4 通过 Response 跨域

此方式是解决跨域问题最原始的方式，但它可以支持任意的 Spring Boot 版本（早期的 Spring Boot 版本也是支持的）。但此方式也是局部跨域，它应用的范围最小，设置的是方法级别的跨域，它的具体实现代码如下：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;

@RestController
public class TestController {
    @RequestMapping("/test")
    public HashMap<String, Object> test(HttpServletResponse response) {
        // 设置跨域
        response.setHeader("Access-Control-Allow-Origin", "*");
        return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
    }
}

3.5 通过 ResponseBodyAdvice 跨域

通过重写 ResponseBodyAdvice 接口中的 beforeBodyWrite（返回之前重写）方法，我们可以对所有的接口进行跨域设置，它的具体实现代码如下：

import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;

@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice {
    /**
     * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写）
     * 返回 true 表示重写
     */
    @Override
    public boolean supports(MethodParameter returnType, Class converterType) {
        return true;
    }
    /**
     * 方法返回之前调用此方法
     */
    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,
                                  Class selectedConverterType, ServerHttpRequest request,
                                  ServerHttpResponse response) {
        // 设置跨域
        response.getHeaders().set("Access-Control-Allow-Origin", "*");
        return body;
    }
}

此实现方式也是全局跨域，它对整个项目中的所有接口有效。

4.原理分析

为什么通过以上方法设置之后，就可以实现不同项目之间的正常交互呢？这个问题的答案也很简单，我们之前在说跨域时讲到：“跨域问题本质是浏览器的行为，它的初衷是为了保证用户的访问安全，防止恶意网站窃取数据”，那想要解决跨域问题就变得很简单了，只需要告诉浏览器这是一个安全的请求，“我是自己人”就行了，那怎么告诉浏览器这是一个正常的请求呢？只需要在返回头中设置“Access-Control-Allow-Origin”参数即可解决跨域问题，此参数就是用来表示允许跨域访问的原始域名的，当设置为“*”时，表示允许所有站点跨域访问，如下图所示：

所以以上 5 种解决跨域问题的本质都是给响应头中加了一个 Access-Control-Allow-Origin 的响应头而已。

演示项目源码

https://gitee.com/mydb/springboot-examples/tree/master/spring-boot-cross

总结

跨域问题的本质是浏览器为了保证用户的一种安全拦截机制，想要解决跨域问题，只需要告诉浏览器“我是自己人，不要拦我”就行。它的常见实现方式有 5 种：通过注解实现局部跨域、通过配置文件实现全局跨域、通过 CorsFilter 对象实现全局跨域、通过 Response 对象实现局部跨域，通过 ResponseBodyAdvice 实现全局跨域。

到此这篇关于面试突击之跨域问题的解决方案详解的文章就介绍到这了,更多相关跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

AJAX跨域问题解决方案详解

目录 1.前言 2.解决方案 2.1 设置响应头 2.2 jsonp 2.2.1 前端代码 2.2.2 后端代码 2.3 使用jQuery封装的jsonp 2.4 代理机制(httpclient) 2.4.1 前端代码 2.4.2 代理Servlet代码 2.4.3 目标Servlet代码 2.4.4 图示 2.5 nginx反向代理 1.前言跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源. 通过超链接或者form表单提交或者window.location.href的方式进行跨域
java后台调用接口及处理跨域问题的解决

目录 java调用接口及处理跨域在这记录一个通用的方法调用外部接口引起的跨域问题解决问题 java调用接口及处理跨域在做系统的时候,有些时候系统A的js代码需要调用系统B的接口,这就会产生跨域现象,可以通过后台调用处理跨域问题,这就有点 “代理” 的意思了. 在这记录一个通用的方法 public String httpPost(String urlStr,Map<String,String> params){ URL connect; StringBuffer data = new
关于后端如何解决跨域的问题说明

目录什么是跨域请求什么是同源策略同源策略限制内容有那什么又是同源? 跨域解决方案 1.jsonp 2.cors 3.@CrossOrigin注解 4.使用SpringCloud网关 5.Node中间件代理(两次跨域) 6.nginx反向代理总结对于跨域,相信同学们都有所了解.前端的跨域的若干种方式,大家也都知道,什么 JSONP,iframe+domain 等等.但是我们今天的主题,不是前端跨域,而是后端跨域. 一旦提及到跨域,就会想到同源策略,那我们就先来回顾跨域和同源策略. 什么
AJAX请求以及解决跨域问题详解

目录 AJAX 介绍一.原生AJAX请求(GET) 二.jQuery AJAX请求(GET 和POST) 三.跨域问题的解决四.其他解决跨域问题方法总结 AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求. 最大优势:无刷新获取数据优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容当然也存在其缺点问题:比如跨域问题等! 一.原生AJAX请求(GET) 由于get和post请求类似,原生代码相比jQuery复杂一些:
面试突击之跨域问题的解决方案详解

目录 1.跨域三种情况 2.跨域问题演示 2.1 前端网站 2.2 后端接口 3.解决跨域问题 3.1 通过注解跨域 3.2 通过配置文件跨域 3.3 通过 CorsFilter 跨域 3.4 通过 Response 跨域 3.5 通过 ResponseBodyAdvice 跨域 4.原理分析演示项目源码总结跨域问题指的是不同站点之间,使用 ajax 无法相互调用的问题.跨域问题本质是浏览器的一种保护机制,它的初衷是为了保证用户的安全,防止恶意网站窃取数据. 但这个保护机制也带来了新的问题
Java JWT实现跨域身份验证方法详解

目录 1.JWT简介 2.JWT的结构 2.1 头部(header) 2.2 载荷(payload) 2.3 签证(signature) 3.JWT的原则 4.JWT的用法 5.JWT的问题和趋势 6.整合JWT令牌 6.1 在模块中添加jwt工具依赖 6.2 创建JWT工具类 1.JWT简介 JWT(JSON Web Token)是目前流行的跨域认证解决方案,是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信
JS前端同源策略和跨域及防抖节流详解

目录引言 jQuery中JSONP的实现防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表节流[重点] 防抖和节流的区别引言协议,域名,端口相同,就具有相同的源同源策略:浏览器提供的一个安全策略跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域
Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站前后端分离最后跪在ajax跨域上面了自己在网上找了个方法亲试可用记录一下写一个类继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha
java 请求跨域问题解决方法实例详解

java 请求跨域问题解决方法实例详解新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu
vue跨域proxy代理配置详解

目录引言例一例二总结引言相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成,无需多次npm run serve 先来一个正则热热身待会需要用,看懂了再往下看: 例一这是我使用express自己搭建的一个超级简单的服务器,代码如下(没有设置允许跨域请求) // 引
SpringBoot面试突击之过滤器和拦截器区别详解

目录实现过滤器和拦截器 a) 实现过滤器 b) 实现拦截器过滤器 VS 拦截器 1.出身不同 2.触发时机不同 3.实现不同 4.支持的项目类型不同 5.使用的场景不同总结实现过滤器和拦截器首先,我们先来看一下二者在 Spring Boot 项目中的具体实现,这对后续理解二者的区别有很大的帮助. a) 实现过滤器过滤器可以使用 Servlet 3.0 提供的 @WebFilter 注解,配置过滤的 URL 规则,然后再实现 Filter 接口,重写接口中的 doFilter 方法,具
关于Ajax跨域问题及解决方案详析

复现Ajax跨域问题做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java 首先是一个简单的订单系统, 通过访问/loadOrderList, 最终以json串形式返回订单集合. 该项目使用Tomcat发布在7070端口. @RequestMapping("/loadOrderList") @ResponseBody public List<Order> loadOrderList(String uid){ //模拟订单数据 Order o1 = new Orde
ajax和jsonp跨域的原理本质详解

为什么会有跨域问题? - 因为有同源策略同源策略是浏览器的一种安全策略,所谓同源指的是请求URL地址中的协议, 域名和端口都相同,只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安全性在同源策略下,浏览器不允许 Ajax跨域获取服务器数据 http://www.example.com/detail.html 跨域请求: http://api.example.com/detail.html 域名不同 http://www.example.com:8080/detail.ht
django解决跨域请求的问题详解

解决方案 1.安装django-cors-headers pip install django-cors-headers 2.配置settings.py文件 INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意顺序 ... ) #