深入浅出，跨域漫谈

SEO关键词：

文章

正文

各位前端开发小伙伴，

今天我们来聊一聊跨域。

作为前端开发，从入行起，应该就接触过跨域的概念。工作中，在与服务端配合时，也经常需要处理跨域相关问题。如果你不能理解到底什么是跨域，那在与服务端配合解决跨域问题时，你可能就要落入对方的掌控之中了(哈哈，开个玩笑)。

为了避免这一尴尬的境地，今天我来带着大家一起重温并巩固一下以下内容：

• 什么是跨域？
• 跨域的原理是什么？
• 有哪些常见的跨域解决方案？
• 预检请求和OPTIONS请求是什么？
• Access-Control-Allow-*响应头又是什么？
• 在WebSockets和WebRTC中如何处理跨域问题？

好了，废话不多说，我们开始吧！

什么是跨域？

跨域，是指浏览器向一个与它不在同一个域名的服务器发送请求。比如，你的网页在example.com域名下，而你向api.example.com域名下的服务器发送请求，这就构成了跨域。

跨域的原理是什么？

跨域之所以会发生，是因为浏览器的同源策略。同源策略是一个安全机制，它规定了浏览器只能向与它同源的服务器发送请求。同源是指协议、域名和端口号都相同的服务器。

比如，以下三个URL是同源的：

• https://example.com
• http://example.com
• https://example.com:8080

而以下三个URL则不是同源的：

• https://example.com
• http://example.org
• https://example.com:8081

当浏览器向一个与它不同源的服务器发送请求时，就会发生跨域。

有哪些常见的跨域解决方案？

跨域的解决方案有很多，其中最常见的包括以下几种：

• CORS
• JSONP
• 代理

CORS

CORS（Cross-Origin Resource Sharing）是W3C制定的一套跨域解决方案。它允许浏览器向与它不同源的服务器发送请求。

CORS的工作原理是，在浏览器发送请求之前，会先发送一个预检请求（OPTIONS请求）到服务器。服务器收到预检请求后，会返回一个响应头，其中包含了允许跨域请求的各种信息。浏览器收到预检请求的响应头后，就会知道它可以向服务器发送真正的请求了。

JSONP

JSONP（JSON with Padding）是一种非标准的跨域解决方案。它的原理是，浏览器向服务器发送一个带有回调函数参数的