大家好，我是第八哥，作为一名做了10年开发的前端老兵，我遇到过无数和跨域相关的问题。尤其是涉及CSP策略和预检请求(Preflight)调试的时候，很多同学会一脸懵。今天我就结合实战经验，手把手教大家彻底搞懂这两个关键知识点。
一、为什么会有跨域资源加载问题？
跨域(Cross-Origin)的本质是浏览器的安全策略：同源策略(Same-Origin Policy)。当我们请求的资源和当前页面的协议、域名或端口不一致时，浏览器就会限制请求或响应。
最常见的情况是：前端部署在https://frontend.com，后端接口在https://api.server.com。这时请求就会触发CORS策略。
二、CSP策略(Content Security Policy)在跨域中的作用
CSP是一种安全机制，用来限制网页可以加载的资源来源。很多同学以为CSP只跟XSS安全相关，其实在跨域资源加载时也非常重要。
例如，若后端设置了：
Content-Security-Policy: default-src 'self'; img-src https://cdn.example.com;这意味着只能从当前域加载资源，图片只能从cdn.example.com加载，其他来源会被拦截。
解决方法： 如果遇到资源被CSP拦截，后端需要在CSP响应头中添加允许的资源域名，或者使用'unsafe-inline'和'unsafe-eval'等临时放行策略。
三、预检请求(Preflight)是什么？
当我们发送跨域请求时，如果请求满足某些条件，比如使用了自定义Header、非GET/POST请求，或设置了Content-Type为非标准类型，浏览器会先发一个OPTIONS预检请求。
OPTIONS /api/data HTTP/1.1
Host: api.server.com
Origin: https://frontend.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type, Authorization如果服务器没有正确返回CORS响应头，那么请求就会失败。
四、如何解决预检请求失败
最常见的解决方案是在后端正确配置响应头：
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST,
OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true如果后端漏配了OPTIONS，请求时会直接报错。在Node.js中可以这样写：
app.options('*', (req, res) => {
res.header('Access-Control-Allow-Origin', 'https://frontend.com');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.sendStatus(204);
});这样就能保证预检请求顺利通过。
五、实战调试技巧
1. 用Chrome DevTools检查请求
在Network面板中找到被拦截的请求，查看Request Headers和Response Headers，可以直接确认问题出在CSP还是CORS。
2. 模拟跨域场景
使用curl命令直接请求后端接口，确认是否是后端问题：
curl -i -X OPTIONS "https://api.server.com/data" \
-H "Origin: https://frontend.com" \
-H "Access-Control-Request-Method: POST"3. 减少预检请求
如果想优化性能，减少预检请求的数量，可以参考下面的方法：
- 1. 使用GET或POST请求，避免PUT、DELETE等方法。
- 2. 避免自定义Header，比如不要随意加
X-Token。 - 3. 将
Content-Type限制在application/x-www-form-urlencoded、multipart/form-data或text/plain。
六、CSP与CORS的最佳实践
- • 在后端允许指定域名，不要用
*，避免安全风险。 - • 合理配置
Content-Security-Policy，避免加载不安全资源。 - • 调试时先检查CSP，再检查CORS，避免误判问题来源。
- • 使用工具如Postman或curl模拟请求，快速定位问题。
七、总结
跨域资源加载问题，本质上是浏览器安全机制和后端配置之间的博弈。CSP控制加载源，预检请求确保安全通信。只要理解原理，掌握调试技巧，大多数问题都能快速解决。
评论