什么是跨域？
跨域指的是浏览器在同源策略下，限制了页面从一个源加载的资源去访问另一个源的内容。这个“源”包括协议、主机名、端口号。
比如，假设当前页面的源为 http://www.example.com，那么它就不能直接访问 http://www.anotherdomain.com 的资源，即使这些资源是公开可用的。
为什么需要跨域？
因为 Web 应用程序通常由多个服务组成，这些服务可能分布在不同的服务器上。例如，前端代码可能在 www.example.com 上，而 API 可能在 api.example.com 上。如果同一站点的所有资源都放在一个域名下，将会导致单点故障和性能问题。
所以我们需要跨域来访问其他域名的资源，以提高应用程序的可扩展性和灵活性。
如何实现跨域？
JSONP
JSONP 是一种解决跨域问题的方法，它利用 script 标签的 src 属性可以跨域访问资源的特性。具体来说，就是在页面中添加一个 script 标签，并且将其 src 属性设置为要请求的地址，然后服务器返回一个函数调用，通过该函数传递数据给客户端。
-------- -------------------- - ------------------ - ----- ------ - --------------------------------- ---------- - ------------------------------------------------------ ----------------------------------
服务器返回的数据应该是一个函数调用，其中参数就是需要传递给客户端的数据：
--------------------- ------- ---- -----
JSONP 的优点是简单易用，但是它只支持 GET 请求，并且不安全，容易受到 XSS 攻击。
CORS
CORS（Cross-Origin Resource Sharing）是一种更安全、更强大的解决跨域问题的方法。它需要前端和后端都进行相应的配置，可以支持多种 HTTP 请求方式。
在前端代码中，可以通过设置 XMLHttpRequest 对象的 withCredentials 属性为 true 来启用 CORS：
----- --- - --- ----------------- ------------------- - ----- --------------- ------------------------------- ---------- - ---------- - ------------------------------ -- -----------
在后端代码中，需要设置响应头部信息，以允许来自其他域名的请求：
---------------------------- - ----------------------------- ---- ----- ---- ------ ----------------------------- ------------
其中，Access-Control-Allow-Origin 表示允许跨域请求的源，* 表示所有来源均可；Access-Control-Allow-Methods 表示允许跨域请求的 HTTP 方法；Access-Control-Allow-Headers 表示允许跨域请求的头部信息。
总结
通过本文的介绍，我们了解到了什么是跨域以及为什么需要跨域。并且，我们学习了两种常见的跨域解决方法：JSONP 和 CORS，并且分别给出了相应的示例代码。
总的来说，CORS 是一种更安全、更强大的跨域解决方法，在实际开发中应该优先考虑使用它来进行跨域请求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8256