JS跨域CORS方案

JS跨域CORS方案

引言

浏览器同源策略要求协议、域名、端口完全一致，前端页面访问另一个域名的接口就会被拦截报跨域错误。CORS是目前最标准、主流的跨域解决方式，由后端配合响应头放行。

什么是同源策略

三个任意一项不同都算跨域：

• 协议不同（http/https）；
• 域名不同；
• 端口不同。

CORS后端响应头（PHP）

<?php
header('Access-Control-Allow-Origin: https://www.example.com');
header('Access-Control-Allow-Methods: GET,POST,OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,Authorization');
header('Access-Control-Allow-Credentials: true');

携带cookie时Allow-Origin不能写*，必须指定具体域名，且前端请求withCredentials为true。

预检请求OPTIONS

POST JSON等复杂请求，浏览器会先发OPTIONS预检，后端要直接放行OPTIONS，返回204，否则正式请求发不出去。

其他常见跨域方式对比

• JSONP：只支持GET，老旧方案；
• Nginx反向代理：前端请求同源nginx，由nginx转发接口，无浏览器跨域；
• 开发环境代理：Vite、Webpack devServer proxy临时解决。

注意事项

• 生产不要用*放开所有来源；
• 区分简单请求和预检请求；
• 配合cookie要带Credentials并指定来源；
• 接口服务端做好来源校验。

总结

CORS是前后端分离首选方案，核心是后端设置允许来源、方法、响应头。复杂请求先处理OPTIONS预检，带cookie时指定具体域名，安全可控，比JSONP和代理更规范。