跨域（Cross-Origin Resource Sharing，简称 CORS）是一种安全策略，用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略（Same-Origin Policy）的一部分，旨在防止恶意网站通过一个域的网页访问另一个域的敏感数据。
由于浏览器实施的同源策略（Same Origin Policy），这是一种基本的安全协议，它确保了浏览器的稳定运行。没有同源策略，浏览器的许多功能可能无法正常工作。整个Web体系建立在同源策略之上，浏览器是这一策略的具体实现。该策略禁止来自不同域的JavaScript脚本与另一个域的资源进行交互。所谓同源，指的是两个页面必须具有相同的协议（protocol）、域名（host）和端口号（port）。
很简单，只要当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
比如下图这个例子，我们可以很好的分析。
由于浏览器的同源策略限制，存在以下跨域问题：
这些限制确保了Web应用的安全性，防止恶意网站访问其他网站的敏感数据。但同时也给开发跨域Web应用带来了挑战，需要采取相应的跨域解决方案。
3.1 设置document.domain
我们可以通过设置document.domain解决无法读取非同源网页的 Cookie问题。
因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）
3.2 跨文档通信API
在Web开发中，跨文档消息传递是一个常见的需求，尤其是在使用iframe或弹出窗口时。postMessage方法提供了一种安全的方式来实现跨源通信，允许父窗口（parent window）和子窗口（child window）之间进行消息交换。以下是如何使用postMessage方法的一个示例：
1.父窗口发送消息到子窗口：
2.子窗口接收消息：
3.子窗口发送消息回父窗口：
4.父窗口接收来自子窗口的消息：
使用postMessage方法可以解决以下方面的问题：
调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）
也就是它可用于解决以下方面的问题：
3.3 JSONP
JSONP 是服务器与客户端跨源通信的常用方法。
最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
核心思想：网页通过添加一个
原生方式实现代码：
jQuery Ajax实现代码：
Vue.js实现代码：
3.4 CORS
CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin 2、带cookie跨域请求：前后端都需要进行设置
前端只需要根据xhr.withCredentials字段判断是否带有cookie
1、原生Ajax实现方式
2、jQuery Ajax实现方式
3、Vue-resource
4、Axios
服务端设置：
服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
Java实现方式
Nodejs后台
3.5 Webpack本地代理
在webpack.config.js中利用 WebpackDevServer 配置本地代理。
如下简单配置案例，这样 的请求就是后端的接口
3.6 Websocket
Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 服务器与 客户端都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
3.7 Nginx反向代理
Nginx 作为一种高效的反向代理服务器，其工作原理与 Node.js 中间件代理相似，它允许开发者搭建一个中转服务器来转发请求。通过 Nginx 实现反向代理，可以轻松地解决跨域问题，这是一种简便且高效的解决方案。
具体来说，通过修改 Nginx 的配置文件，可以设置反向代理，将请求从一个服务器转发到另一个服务器。这种方式不仅适用于所有主流浏览器，而且支持 session 管理，无需对现有代码进行任何修改，也不会对服务器性能产生负面影响。
操作步骤如下：
1、在 Nginx 配置文件中，为需要代理的每个服务设置一个特定的前缀。 2、配置 Nginx 将这些前缀的 HTTP/HTTPS 请求转发到对应的真实服务器。 3、通过这种方式，所有通过 Nginx 转发的 URL 都将具有相同的域名、协议和端口号，从而满足浏览器的同源策略要求。
由于所有 URL 都指向同一个服务器，浏览器将它们视为同源，从而避免了跨域访问的限制。实际上，这些 URL 背后是由不同的物理服务器提供服务。这样，服务器内部的 JavaScript 代码就可以自由地跨域调用这些服务器上的资源。
先下载nginx，然后将 nginx 目录下的 nginx.conf 修改如下：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/9042.html