跨域问题 XHR实现跨域资源共享（CORS）

最新推荐文章于 2025-06-07 15:30:28 发布

原创

最新推荐文章于 2025-06-07 15:30:28 发布 · 8.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

本文介绍了跨域问题的解决方案之一——CORS，包括CORS的简介、浏览器如何处理CORS请求，以及服务端需要设置的请求头，如Access-Control-Allow-Origin等，帮助开发者理解并实现AJAX跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：以前遇到跨域的问题总有点不知所措，最近看的大神用3行代码就解决了ajax请求的跨域问题，大呼神奇，所以自己学习了一下，特此总结。感谢参考文章的支持。

一、简介

对于跨域请求目前常用的有三种方式，代理，JSONP，XHR2。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

二、CORS请求

1、介绍

IE10及以上、Firefox 3.5+、 Safari 4+、 Chrome、 iOS 版 Safari 和 Android 平台中的 WebKit 都通过 XMLHttpRequest对象实现了对 CORS 的原生支持。只要在open()方法的URL中使用绝对定位即可实现CORS。一般推荐在同域中使用相对URL，在跨域时使用绝对URL。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

对于简单请求（GET和POST），浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段用来说明：本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。