跨域场景下Chrome POST请求报net::ERR_ACCESS_DENIED问题求助

问题场景 #

• 源Angular应用上传文档后，打开新Chrome标签页加载目标Angular应用，通过window.postMessage()发送包含文件及其他数据的消息
• 目标应用监听消息后，携带文件向第三方主机服务发起HTTP POST请求
• 同源环境下运行正常，跨源时Chrome中POST请求失败，报错net::ERR_ACCESS_DENIED，但Safari中跨源场景运行正常

已做排查 #

• 已为目标SPA配置响应头：

Cross-Origin-Embedder-Policy: unsafe-none
Cross-Origin-Opener-Policy: unsafe-none
Cross-Origin-Resource-Policy: cross-origin
Referrer-Policy: strict-origin

• 请求前控制台无报错，确认目标应用已成功获取源端传递的文件

解决思路 #

1. 转换File对象为Blob后传递
   Chrome对跨源传递的File对象有更严格的权限校验，即便通过postMessage拿到文件，发起跨域请求时可能因文件的原始来源标记被拦截。可在源应用发送时将File转为Blob：

// 源应用侧处理
const blob = new Blob([file], { type: file.type });
const targetWindow = window.open(targetUrl);
targetWindow.postMessage({ blob, fileName: file.name, otherData }, targetOrigin);
// 注意：targetOrigin不要用*，明确指定目标域名提升安全性

// 目标应用侧接收后重新构造File（如果需要文件名等元信息）
const receivedFile = new File([event.data.blob], event.data.fileName, { type: event.data.blob.type });

2. 调整跨源响应头组合
   当前的Cross-Origin-Opener-Policy: unsafe-none允许跨源页面共享浏览上下文组，但Chrome对此场景下的文件请求有额外限制：

• 尝试将Cross-Origin-Opener-Policy改为same-origin，同时源应用postMessage时明确指定目标域名，再测试请求是否正常
• 检查第三方服务是否配置了正确的CORS响应头，允许目标应用域名发起包含multipart/form-data（若文件以表单方式提交）的请求，需确保Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段配置正确

3. 排查Chrome隐私安全设置
   Chrome的「增强型安全浏览」等隐私设置可能拦截跨源文件上传请求，可尝试：

• 在Chrome设置中关闭增强型安全浏览
• 用隐身模式测试，排除本地设置干扰

4. 检查FormData构造逻辑
   若目标应用通过FormData携带文件发起请求，确保构造逻辑正确：

const formData = new FormData();
formData.append('file', receivedFile, receivedFile.name);
formData.append('extraData', otherData);

// 发起请求时不要手动设置Content-Type为multipart/form-data，浏览器会自动生成正确的boundary
httpClient.post(targetServiceUrl, formData);

内容的提问来源于stack exchange，提问作者Dany Marques