1.什么是跨域?
跨域(Cross-Origin)是浏览器的**同源策略(Same-origin policy)**所施加的安全限制。当一个请求的协议、域名或端口与当前页面不同时,就会触发跨域限制。
2.什么是同源
同源是指协议、域名、端口号三者相同视为同源。
3.常见的跨域错误信息
- No 'Access-Control-Allow-Origin' header present
- Blocked by CORS policy
- The response to preflight request doesn't pass access control check
4.一般出现跨域的情况的请求类型
类型 | 说明 |
---|---|
简单请求(Simple Request) | GET/HEAD/POST 请求,且 Content-Type 是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain |
预检请求(Preflight Request) | 使用 OPTIONS 方法检查服务器是否允许实际请求(如 PUT、DELETE、带自定义 Header 的请求) |
5.后端解决跨域问题的常见方法
java
//1.java
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有来源
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
response.setHeader("Access-Control-Allow-Credentials", "true");
//2.sprinBoot
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:8080") // 指定允许的源
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("Content-Type", "Authorization")
.allowCredentials(true)
.maxAge(3600); // 预检缓存时间
}
};
}
}
⚠️ 注意:生产环境建议不要使用 allowedOrigins("*"),尤其是涉及 Cookie 或敏感数据时。