跨域问题

同源策略

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示它们同源。

浏览器的同源策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。

跨域影响

  • 标签如<script>、<img>、<iframe>、<link>可以加载跨域资源，不受同源限制。
  • 脚本发起的跨域请求（如XMLHttpRequest和Fetch）受同源策略限制。
  • 跨域请求可以正常发起，但返回结果被浏览器拦截。
  • 某些浏览器（如Chrome和Firefox）不允许从HTTPS跨域访问HTTP。

跨域解法

  • JSONP跨域
  • 修改document.domain跨子域
  • 使用window.name进行跨域
  • 使用HTML5中的window.postMessage方法跨域传送数据
  • 使用代理服务器：通过将请求替换为本域请求，然后服务器端动态脚本转发实际请求。
  • CORS（跨域资源共享）：需要浏览器和服务器同时支持。服务器实现CORS接口后，可以跨源通信。

在SpringBoot中通过CORS解决跨越问题

  1. @CrossOrigin 注解：置于 Controller 方法或类，如 @CrossOrigin(value = "http://localhost:8080") 适合细粒度控制。
  2. CorsFilter 过滤器：配置类建 CorsFilter bean，设 CorsConfiguration 允源（addAllowedOrigin("")）、Cookie（setAllowCredentials(true)）、方法（addAllowedMethod("")）、头字段（addAllowedHeader("")）与暴露头（addExposedHeader("")），注映射路径（UrlBasedCorsConfigurationSource 注册），全局过滤拦截。
  3. WebMvcConfigurerAdapter 全局配置：启动类继承 WebMvcConfigurerAdapter 重写 addCorsMappings 或独立配置类继承之，设映射路径（addMapping("/**")）、允源、方法（如 GET 至 OPTIONS）、Cookie 与有效期（maxAge），借配置文件或编码式统一管理跨域，便项目维护扩展，平衡全局管控与配置灵活，为常用全局方案。

一般会选择方案2或者3

处理步骤

预检请求（Preflight Request）：对于某些类型的请求（如使用 HTTP 方法 PUT、DELETE，或者请求带有非简单头部），浏览器会首先发送一个 OPTIONS 请求，这个请求称为“预检请求”。服务器收到这个请求后，会返回一个响应头部，指明实际请求是否被允许。

实际请求（Actual Request）：如果预检请求通过，浏览器会继续发送实际的请求。

响应头部（Response Headers）：服务器在响应中会包含一些特定的 CORS 头部，如 Access-Control-Allow-Origin，以指示哪些域名可以访问资源。

核心请求头

  • Origin：指示请求的源。

  • Access-Control-Request-Method：指示实际请求将使用的方法。

  • Access-Control-Request-Headers：指示实际请求将包含的自定义头部。

核心响应头

  • Access-Control-Allow-Origin：表明允许访问资源的源，可以是具体的源或通配符 *；
  • Access-Control-Allow-Methods：表明允许的方法，如 GET, POST, PUT, DELETE；
  • Access-Control-Allow-Headers：表明允许的自定义头部；
  • Access-Control-Allow-Credentials：表明是否允许发送凭据（如 Cookies）；
  • Access-Control-Expose-Headers：表明哪些头部可以作为响应的一部分被访问；
  • Access-Control-Max-Age：表明预检请求的结果可以被缓存的时间，单位是秒；

常见问题

问题：No 'Access-Control-Allow-Origin' header is present on the requested resource

问题描述：当浏览器发起跨域请求时，未在响应中找到 Access-Control-Allow-Origin 头部。

解决方案：确保服务器端正确设置了 Access-Control-Allow-Origin 头部

问题：The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

问题描述：当请求包含凭据时，Access-Control-Allow-Origin 头部不能设置为通配符 *。

解决方案：明确指定允许的源，Access-Control-Allow-Credentials 为true的时候 Origin不能为*

问题：CORS preflight channel did not succeed

问题描述：预检请求失败，可能是由于服务器未正确处理 OPTIONS 请求。

解决方案：确保服务器正确处理 OPTIONS 请求并返回相应的 CORS 头部

15 张精美动图全面讲解 CORS (qq.com)

跨域踩坑经验总结（内涵：跨域知识科普） - 凝雨 - Yun (ningyu1.github.io)

posted @ 2025-05-05 21:00  一只盐桔鸡  阅读(56)  评论(0)    收藏  举报