前端跨域解决方案cors（前端跨域解决方案）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><img src="https://i-blog.csdnimg.cn/direct/c0ba1b2760c0406c9f59be6fc304cbf0.png#pic_center" alt="在这里插入图片描述" /></p>

讯享网

前端跨域是指在浏览器环境下，当一个网页（源）尝试访问与自身源不同的服务器资源（目标源）时，由于浏览器的同源策略限制而产生的访问限制现象。同源策略（Same-Origin Policy）是浏览器实施的一种安全机制，用于防止恶意网站通过脚本对其他网站的数据进行非法访问，以保护用户的隐私和安全。

按照同源策略的规定，只有当请求的源（）与目标源相匹配时，浏览器才会允许脚本（如JavaScript）发起的网络请求（如Ajax、Fetch、XMLHttpRequest）成功访问目标源的资源。否则，这些请求会被浏览器视为跨域请求，并可能被拦截或阻止。

具体来说，以下情况会被浏览器判定为跨域：

协议不同：如一个HTTPS页面尝试访问HTTP资源。
域名不同：如www.example.com的页面尝试访问api.example.org的API。
端口号不同：如localhost:3000的页面尝试访问localhost:8080的服务。

跨域问题主要影响浏览器端的JavaScript在以下场景中的行为：

AJAX请求：JavaScript通过XMLHttpRequest或Fetch API发起的异步数据请求。
WebSockets连接：JavaScript创建的WebSocket连接，用于建立浏览器与服务器间的双向通信。
嵌入资源：如尝试在页面中通过, , , 等标签加载跨域的图片、脚本、样式表或嵌入式页面。
跨窗口交互：如尝试通过方法与不同源的窗口进行通信。

虽然同源策略对大部分跨域请求进行了限制，但对某些特定类型的资源（如上述的嵌入资源）和某些特定操作（如跨窗口通信）放宽了限制。此外，现代Web开发中也发展出了一系列技术与策略来解决或绕过跨域限制，包括但不限于：

CORS（Cross-Origin Resource Sharing，跨源资源共享）：服务器通过返回特定的HTTP响应头，允许浏览器跨域访问其资源。
代理：通过在本地或服务器端设置代理，将跨域请求转发至目标服务器，使得浏览器认为请求在同一源内。
JSONP（JSON with Padding）：利用标签不受同源策略限制的特性，通过动态插入脚本标签加载跨域数据。
iframe与postMessage：在同源的中加载跨域资源，然后通过进行跨窗口通信。
Nginx反向代理：在生产环境中，使用Nginx等Web服务器作为反向代理，转发客户端的跨域请求，并在响应时添加CORS头。

前端开发者在遇到跨域问题时，需要根据项目需求、开发环境和服务器配置选择适用的跨域解决方案，以确保浏览器端能够顺利访问所需跨域资源。

以下是6种常见的前端跨域解决方案的详解与举例：

1. CORS（Cross-Origin Resource Sharing，跨源资源共享）

原理：CORS是一种W3C标准，通过服务器返回特定的HTTP响应头，允许浏览器与服务器之间进行跨源通信。服务器明确声明哪些源可以访问其资源，以及允许的请求方法、头部和预检要求。

讯享网

举例：服务器端（如Node.js Express应用）设置CORS响应头：

讯享网

前端（如使用Fetch API）发起跨域请求：

2. 代理（Proxy）

原理：通过本地开发服务器（如Webpack Dev Server、Vue CLI Serve）的代理功能，将前端发出的跨域请求转发到目标服务器。浏览器认为请求始终在同一源内，避免了同源策略限制。

举例：在Vue CLI创建的项目中，配置代理：

讯享网

前端发起请求：

3. JSONP（JSON with Padding）

原理：利用标签不受同源策略限制的特性，动态插入带有跨域URL的标签。服务端返回一个调用前端预定义回调函数的JS代码片段，将数据作为参数传递。

举例：前端定义回调函数：

讯享网

服务端响应JSONP请求（假设使用Node.js）：

4. Nginx反向代理

原理：在生产环境中，使用Nginx等Web服务器作为反向代理，将客户端的跨域请求转发到目标服务器，并在响应时添加CORS头。客户端感知不到实际服务器源，从而规避跨域限制。

举例：Nginx配置文件中的反向代理配置：

讯享网

前端请求保持不变，访问代理服务器地址：

5. iframe与postMessage

原理：将跨域请求封装在同源的中，通过方法实现跨窗口通信，使主窗口能够获取到内加载的跨域资源数据。

举例：主页面创建并监听事件：

讯享网

页面接收消息并响应：

6. WebSocket

原理：WebSocket协议支持浏览器与服务器之间建立全双工的持久连接，一旦连接建立，客户端与服务器端就可以自由地互相发送数据，不受同源策略限制。

举例：前端创建WebSocket连接：

讯享网

服务器端（假设使用Node.js的ws库）：

综上所述，前端跨域问题有多种解决方案，其中CORS、代理（尤其是开发阶段的代理）、JSONP、Nginx反向代理是较为常用且现代的解决手段。根据项目需求和环境，选择合适的跨域策略。对于更复杂或特定场景，可以考虑使用iframe与postMessage、WebSocket等技术。
在这里插入图片描述