动态网站建设实训目的/网络营销推广及优化方案
简介
出于安全方面考虑，浏览器发起请求时，会先检查同源策略（协议、主机、端口是否与当前页面相同），不匹配则认为是跨域请求。
CORS (Cross-Origin Resource Sharing)
CORS是一种机制，允许服务器声明哪些域（origin）可以访问其资源，从而绕过同源策略的限制。浏览器会发送预检请求（Preflight Request）以确定是否允许跨域访问。
Preflight请求
Preflight请求是跨域资源共享（CORS）中的一种机制，用于在实际请求之前发送一个预检请求。浏览器在发送某些类型的跨域请求（例如带有自定义标头的请求）之前，会自动发送一个OPTIONS请求，以获取目标服务器是否允许实际请求的权限。
预检请求包含一组查询信息，询问服务器是否允许实际请求。这些查询信息包括：
- Access-Control-Request-Method： 表示实际请求中将使用的 HTTP 方法（例如 GET、POST）。
- Access-Control-Request-Headers： 表示实际请求中将使用的自定义 HTTP 标头。
服务器收到预检请求后，会检查这些信息，然后决定是否允许实际请求。如果服务器允许，它会在响应中包含相应的 CORS 头（例如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 等）。
这个预检请求机制有助于确保安全，因为它防止了潜在的恶意跨域请求。如果服务器支持并验证了预检请求，浏览器才会允许实际请求。
以下是一个预检请求的示例：
请求：
OPTIONS /example/resource HTTP/1.1
Host: example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization
响应：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization
Spring MVC跨域设置
浏览器发起Preflight请求，SpringMVC的处理流程为：
DispatcherServlet#doDispatch -> HttpRequestHandlerAdapter#handle -> AbstractHandlerMapping#handleRequest -> DefaultCorsProcessor#processRequest
DefaultCorsProcessor会根据当前配置的跨域规则，检查当前资源你是否允许发起的域访问，检查不通过时直接返回403 Forbidden，body为Invalid CORS request。
注解方式
可以在类，或者方法上使用@CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.OPTIONS})
Filter模式
对于使用了Spring-Web而没有使用SpringMVC的项目，可以使用Spring提供的CorsFilter，它会拦截的Servlet请求，并添加一些允许跨域的头，以下是允许所有请求跨域的示例
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*");config.addAllowedMethod("*");config.addAllowedHeader("*");source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}
测试
可以使用以下html进行跨域测试
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>POST Request Form</title>
</head>
<body><h1>POST Request Form</h1><form id="postForm"><label for="url">URL:</label><input type="text" id="url" name="url" value="http://xxx" style="width: 100%; margin-bottom: 10px;"><label for="postData">POST Data:</label><textarea id="postData" name="postData" style="width: 100%; height: 100px; margin-bottom: 10px;">
{}</textarea><button type="button" onclick="sendPostRequest()">Send POST Request</button>
</form><script>
function sendPostRequest() {var url = document.getElementById("url").value;var postData = document.getElementById("postData").value;fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json',},body: postData,}).then(response => response.json()).then(data => {console.log('Success:', data);alert('POST request sent successfully!');}).catch((error) => {console.error('Error:', error);alert('Error sending POST request!');});
}
</script></body>
</html>