【知识科普】简单聊聊跨域问题

最新推荐文章于 2024-11-19 13:36:29 发布

问道飞鱼

最新推荐文章于 2024-11-19 13:36:29 发布

阅读量1.1k

点赞数 9

分类专栏：计算机综合知识文章标签：跨域问题同源策略

本文链接：https://blog.csdn.net/wendao76/article/details/143161965

版权

计算机综合知识专栏收录该内容

47 篇文章 2 订阅

订阅专栏

文章目录

跨域问题概述

什么是跨域问题？

跨域问题（Cross-Origin Resource Sharing, CORS）是指当一个网页尝试访问另一个不同源（域名、协议或端口不同）的资源时，浏览器出于安全考虑，会限制这种跨源HTTP请求。如果服务器没有正确配置允许跨域访问，浏览器会拦截这些请求，并显示错误。

为什么会出现跨域问题？

这是浏览器的同源策略（Same-Origin Policy）导致的，它是一种安全措施，防止恶意网站读取另一个网站的敏感数据。

如何解决跨域问题？

有几种常见的方法可以解决跨域问题：

CORS Header：
服务器可以在响应头中添加Access-Control-Allow-Origin来指定哪些域名可以访问资源。例如：
```
Access-Control-Allow-Origin: *
```
这表示允许所有域名访问资源。也可以指定具体的域名，如http://example.com。
JSONP（已过时）：
JSONP（JSON with Padding）是一种早期的跨域技术，通过<script>标签获取跨域数据。但由于安全和效率问题，现在已不推荐使用。
代理服务器：
在服务器端设置一个代理，接收前端请求后，代理服务器去请求目标服务器，然后将响应返回给前端。这样，前端实际上是与同源的代理服务器通信。
Document.domain：
如果两个不同的域名需要通信，可以设置document.domain为相同的值，但这要求这两个域名在顶级域名上是相同的。
Window.postMessage：
这是一种安全的方式来实现不同源之间的消息传递。它允许跨文档通信，而不会破坏同源策略。
WebSockets：
WebSockets提供了一种在单个TCP连接上进行全双工通信的方式，不受同源策略的限制。

Spring Boot如何处理跨域问题？

在Spring Boot中，有几种方式可以处理跨域问题：

全局配置：
在@Configuration类中定义一个WebMvcConfigurer实现，添加跨域配置：

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

注解方式：
在控制器或具体的方法上使用@CrossOrigin注解来允许跨域请求：

@RestController
@CrossOrigin(origins = "http://example.com")
public class MyController {
    // ...
}

过滤器：
创建一个过滤器，设置响应头来允许跨域请求：

public class CrossOriginFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://example.com");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization");
        chain.doFilter(req, res);
    }
}

Spring Security配置：
如果使用Spring Security，需要在安全配置中允许跨域请求：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .cors()
        .and()
        // 其他配置...
}

选择合适的方法取决于具体的应用需求和安全考虑。在生产环境中，应谨慎配置CORS策略，以防止潜在的安全风险。

什么是同源策略?

同源策略（Same-Origin Policy）是一种浏览器安全机制，它限制了从一个源加载的文档或脚本与另一个源的资源进行交互。这个策略的目的是防止恶意文档窃取数据，比如一个攻击者控制的网站试图读取或修改另一个网站的内容。

同源策略的基本概念：

源（Origin）：由协议（如HTTP或HTTPS）、域名（或IP地址）、端口号组成。只有当这三个部分都相同时，才被认为是同一个源。

同源策略的限制：

数据访问限制：
- 不同源的网页不能通过JavaScript直接访问彼此的DOM。
- 不同源的网页不能通过JavaScript直接读取彼此的Cookie、LocalStorage和IndexedDB。
网络请求限制：
- 不同源的网页不能通过XMLHttpRequest或Fetch API发送请求到另一个源，除非另一个源明确允许。
Web Sockets限制：
- Web Sockets连接只能在同源之间建立。
插件和iframe限制：
- 从不同源加载的插件或iframe可能受到限制，例如无法执行某些操作或访问父文档的DOM。

同源策略的例外：

图片、CSS和JavaScript：
- 通常，加载图片、CSS和JavaScript不受同源策略的限制，因为这些操作不涉及数据的读写。
CORS（跨源资源共享）：
- 服务器可以通过设置特定的HTTP响应头（如Access-Control-Allow-Origin）来允许或限制某些源的跨域请求。
JSONP（已过时）：
- JSONP是一种早期的跨域技术，通过<script>标签获取跨域数据，但由于安全和效率问题，现在已不推荐使用。
WebSockets：
- WebSockets协议允许跨源通信，不受同源策略的限制。