### 解决文件上传时 `multipart/form-data` 导致的 CORS 跨域问题 #### 服务器端配置 为了处理带有 `multipart/form-data` 的跨域请求，服务器端需要正确配置 CORS 支持。这可以通过多种方式实现，具体取决于所使用的框架。 对于 Spring Boot 应用程序，可以使用 CorsRegistry 对象来配置 CORS 策略： ```java @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 允许所有来源访问资源 .allowedMethods("GET", "POST", "PUT", "OPTIONS", "DELETE", "PATCH", "HEAD") // 明确指定允许的方法 .allowedHeaders("*") // 允许所有的头部信息 .allowCredentials(true) // 是否支持凭证共享 .maxAge(3600); // 预检请求的有效期为一小时 } ``` 上述代码片段展示了如何全面开放 CORS 请求的支持[^4]。需要注意的是，在生产环境中应谨慎设置 `.allowedOrigins("*")` 和 `.allowedHeaders("*")` ，因为它们可能会带来安全风险；建议仅限于信任的应用和服务之间通信。 #### 前端请求调整 在发起文件上传请求之前，确保 XMLHttpRequest 或 Fetch API 中包含了必要的选项以触发浏览器执行预飞行检查（Preflight Request）。例如，当 Content-Type 是 multipart/form-data 并且存在自定义 header 或者设置了 withCredentials 属性，则会被视为非简单请求并触发 Preflight Request: ```javascript const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('/upload-endpoint', { method: 'POST', body: formData, credentials: 'include' // 如果需要携带 cookie 等认证信息 }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ``` 这段 JavaScript 代码创建了一个新的表单数据实例并将选定文件附加到其中。接着调用了 fetch 函数来进行 POST 请求，并指定了 credentials 参数以便能够发送 cookies 给目标站点。由于这里启用了 credentials 功能，因此这是一个复杂的 CORS 请求，将会先发出 OPTIONS 方法作为预检请求给服务端验证权限[^2]。 ---