同源策略、跨域与JSONP/CORS解决策略详解

同源策略是浏览器为了保护用户隐私和数据安全，所实施的一项策略，它基于协议、域名和端口的匹配原则，确保一个源的文档或脚本只能与相同来源的资源进行交互。同源策略限制了以下行为： 1. 读取非同源网页的敏感信息（如Cookie、LocalStorage和IndexedDB） 2. 操纵非同源网页的DOM结构 3. 向非同源地址发送Ajax请求 当两个页面不在同一源下时，就会出现跨域问题，即浏览器不允许不同源的请求。这种限制在实际开发中经常遇到，比如前端应用需要从服务器的不同域名或端口获取数据。 解决跨域问题的传统方法有两种： 1. JSONP (JSON with Padding)：JSONP是早期为绕过同源策略而设计的一种技术，主要应用于GET请求。其原理是利用`<script>`标签不受同源策略限制的特点，通过动态创建`<script>`标签指向远程服务器提供的一个能返回JSON格式数据的URL，服务器将数据包裹在一个可被浏览器识别的函数调用中（通常是一个自定义的回调函数名），前端接收到响应后解析函数调用，获取数据。这种方法虽然简单，但仅限于GET请求，且存在安全风险，因为脚本可以执行任意的JavaScript代码。 示例代码： ```html <script> function success(data) { console.log('获取到了data数据：', data); } </script> <script src="http://www.liulongbin.top:3006/api/jsonp?call=success"></script> ``` 2. CORS (Cross-Origin Resource Sharing)：CORS 是 W3C 定义的现代跨域解决方案，适用于更广泛的HTTP请求类型（包括GET、POST等），并且提供了更多的选项控制跨域请求。CORS 需要在服务器端设置Access-Control-Allow-Origin头来明确允许特定源访问，同时支持其他头信息如Authorization。CORS是跨域请求的标准化解决方案，但可能不支持旧版浏览器。 总结来说，同源策略和跨域问题是Web开发中的核心挑战，JSONP是一种简单但有限的解决方式，而CORS则是更为强大且现代的标准。在实际项目中，开发者需要根据应用场景和兼容性需求，选择适合的跨域解决方案。