跨域请求(CORS - Cross-Origin Resource Sharing)是一种W3C标准,用于解决Web应用(尤其是使用XMLHttpRequest或Fetch API发起请求的Ajax应用)因浏览器同源策略而导致的跨域数据访问限制问题。同源策略是浏览器的一项安全机制,规定了一个源(origin,由协议、域名、端口号三者组合而成)下的文档或脚本只能与同源的资源交互,禁止不同源之间的读写操作,以防止恶意网站窃取敏感数据。
在CORS机制下,服务器通过在HTTP响应头中添加特定的标志来告知浏览器允许哪些源进行跨域请求。以下是CORS的核心概念和解决跨域问题的方法:
CORS的工作原理:
简单请求:对于符合以下条件的请求,浏览器会自动在请求头中添加
Origin
字段,并发送至服务器:- HTTP方法为
GET
,POST
,HEAD
。 - 请求头只包含以下几种类型,并且其值满足一定条件:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
,且其值只能是application/x-www-form-urlencoded
、multipart/form-data
或text/plain
。
服务器收到请求后,会在响应头中加入
Access-Control-Allow-Origin
等CORS相关字段来表明允许哪些源进行访问。- HTTP方法为
预检请求(Preflight Request):对于非简单请求,浏览器首先会发送一个OPTIONS方法的预检请求到服务器,询问服务器是否接受实际的跨域请求。预检请求中包含了
Access-Control-Request-Method
、Access-Control-Request-Headers
等特殊头信息,服务器根据这些信息决定是否允许实际请求的发生,并在响应中返回相应的CORS头信息。
解决跨域问题的步骤:
服务器端配置:服务器需要在接收到跨域请求时,在响应头中设置相应的CORS策略。例如:
Access-Control-Allow-Origin: '*' 或 指定的允许访问的源地址 Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization (或其他自定义头) Access-Control-Max-Age: 3600 (预检请求的有效期,单位秒)
其中
Access-Control-Allow-Origin
是核心字段,用来指定允许哪些源可以访问资源。客户端JavaScript无须特殊配置:因为CORS是由服务器控制的,客户端的JavaScript代码只需要正常地发起请求即可。浏览器会自动处理CORS相关的附加请求和响应头信息。
注意点:如果服务器没有正确配置CORS响应头,或者拒绝了来自特定源的请求,浏览器会阻止客户端脚本获取响应内容,从而保护用户的隐私和安全。
通过以上机制,开发者可以在服务器端灵活地控制哪些源可以访问其提供的API或其他资源,从而实现安全的跨域数据交换。