深入探讨跨域请求（CORS）：原理、解决方案与详细示例代码

news2024/7/6 19:55:03

深入探讨跨域请求（CORS）：原理、解决方案与详细示例代码

🌐 深入探讨跨域请求（CORS）：原理、解决方案与详细示例代码 🌐
- 摘要
- 引言
- 正文内容
- - 什么是跨域？
  - - 为什么会有跨域问题？
  - 示例代码
  - 解决方案
  - - 1. 添加@CrossOrigin注解
    - - 详细描述：
    - 2. 配置WebMvcConfigurer
    - - 详细描述：
    - 3. 配置Filter
    - - 详细描述：
  - 🤔 QA环节
  - 小结

在这里插入图片描述

博主默语带您 Go to New World.
✍ 个人主页—— 默语的博客👦🏻
《java 面试题大全》
《java 专栏》
🍩惟余辈才疏学浅，临摹之作或有不妥之处，还请读者海涵指正。☕🍭
《MYSQL从入门到精通》数据库是开发者必会基础之一~
🪁 吾期望此文有资助于尔，即使粗浅难及深广，亦备添少许微薄之助。苟未尽善尽美，敬请批评指正，以资改进。！💻⌨

🌐 深入探讨跨域请求（CORS）：原理、解决方案与详细示例代码 🌐

摘要

大家好！我是默语，一个喜欢探讨技术细节的博主。在这篇博客中，我们将深入探讨跨域请求（CORS），了解其原理，并提供具体的解决方案和详细的示例代码。跨域问题是前后端分离架构中经常遇到的一个难题，通过本篇文章，你将学会如何优雅地解决它！🤓

引言

跨域资源共享（CORS）是一个涉及网络请求的常见问题，特别是在现代的前后端分离开发模式下。许多开发者在处理跨域请求时会遇到各种难题，这篇文章将从基础知识开始，逐步深入，提供实用的解决方案和详细的代码示例，帮助你轻松应对跨域问题。

正文内容

什么是跨域？

跨域是指浏览器因安全限制，阻止一个域的网页向另一个域发起请求的一种行为。浏览器出于安全考虑，会默认阻止跨域请求，但在实际开发中，我们常常需要进行跨域访问。

为什么会有跨域问题？

跨域问题主要源自浏览器的同源策略。同源策略要求协议、域名、端口均相同的请求才允许通过，任何一个不同都会被视为跨域请求。例如，当你在http://example.com的网页中请求http://api.example.com的数据时，就会触发跨域请求。

示例代码

我们可以通过一个简单的例子来展示跨域请求问题：

// 跨域请求示例代码
fetch('http://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

如果http://example.com与当前页面的域名不同，那么浏览器会阻止这个请求，并在控制台中显示一个跨域错误信息。

解决方案

为了解决跨域问题，我们可以采用多种方案。以下是几种常见的解决方法：

1. 添加@CrossOrigin注解

对于使用Spring Boot的项目，可以在控制器类或方法上添加@CrossOrigin注解，允许特定域名的跨域请求：

@RestController
@CrossOrigin(origins = "http://example.com")
public class MyController {
    
    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello, World!");
    }
}

详细描述：

@RestController：这是一个组合注解，相当于同时使用@Controller和@ResponseBody。它表示该类中的所有方法都会返回JSON或XML格式的数据。
@CrossOrigin(origins = "http://example.com")：这个注解允许来自http://example.com的跨域请求。origins属性可以设置为多个域名，甚至可以设置为*以允许所有域名，但这样做不安全。
@GetMapping("/api/data")：这是一个快捷注解，用于处理GET请求。/api/data表示请求的URL路径。
ResponseEntity<String>：这是一个包含HTTP响应的实体，ok()方法表示返回200 OK的状态。

2. 配置WebMvcConfigurer

另一种方式是通过配置WebMvcConfigurer来全局允许跨域请求。这种方式适用于需要统一配置跨域策略的场景：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example.com")
                .allowedMethods("GET", POST, "PUT", "DELETE")
                .allowCredentials(true);
    }
}

详细描述：

@Configuration：这个注解表示该类是一个配置类，用于定义Bean和配置设置。
WebMvcConfigurer：这是一个配置接口，允许自定义Spring MVC的配置。
addCorsMappings：这是一个方法，用于配置跨域请求规则。CorsRegistry提供了一个API来添加跨域映射。
- addMapping("/**")：表示对所有路径生效。
- allowedOrigins("http://example.com")：允许http://example.com域的请求。
- allowedMethods("GET", "POST", "PUT", "DELETE")：允许指定的HTTP方法。
- allowCredentials(true)：允许发送Cookie。

3. 配置Filter

我们还可以通过配置过滤器来解决跨域问题，这种方式更灵活，可以满足复杂的跨域需求：

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.setHeader("Access-Control-Allow-Origin", "http://example.com");
        res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        res.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(request, response);
    }
}

详细描述：

@Component：这个注解表示该类是一个Spring组件，会被Spring容器管理。
Filter：这是一个Servlet过滤器接口，用于在请求和响应之间进行过滤处理。
doFilter：这是过滤器的核心方法，每次请求都会执行这个方法。
- ServletRequest和ServletResponse：表示HTTP请求和响应。
- FilterChain：用于传递请求和响应到下一个过滤器或目标资源。
- HttpServletResponse res = (HttpServletResponse) response：将ServletResponse强制转换为HttpServletResponse，以便设置CORS头。
- setHeader方法：设置CORS相关的HTTP头，允许指定域、方法和是否发送Cookie。