面试题——跨域问题

跨域问题的原因‌：
由于浏览器的同源策略限制，同源策略是浏览器最核心也是最基本的安全功能，Web是构建在同源策略基础之上的。同源策略会阻止一个域的JS脚本和另一个域的内容进行交互。当一个请求的URL的协议、域名、端口三者之间任意一个与当前页面URL不同即为跨域‌1。
‌跨域解决方法‌：
1. ‌设置document.domain解决无法读取非同源的Cookie问题‌：通过将两个页面的document.domain设置为相同，可以实现Cookie的共享（仅限主域相同，子域不同的跨域应用场景）。
2. ‌**跨文档通信API:ml-search[window.postMessage()]**&zwnj;：使用postMessage`方法实现不同窗口或页面之间的消息传递，适用于页面和其打开的新窗口的数据传递、多窗口之间消息的传递、页面与嵌套的iframe消息传递等场景。
3. ‌JSONP‌：利用动态脚本标签<script>来绕过同源策略的限制，通过在请求参数中添加回调函数名，服务器返回执行结果并调用回调函数，实现跨域通信。但JSONP仅支持GET请求，且存在安全风险。
4. ‌CORS（跨域资源共享）‌：CORS是一种W3C标准，通过在服务器端添加特定的HTTP响应头，允许浏览器从一个源访问另一个源的资源。CORS需要浏览器和服务器同时支持，但现代浏览器普遍支持CORS，因此主要是服务器端的实现问题。
5. ‌反向代理‌：通过代理服务器接收请求后转发给目标服务器，并返回结果给浏览器，从而绕过浏览器的跨域限制。这种方法适用于服务器和服务器之间的通信，不涉及浏览器的直接限制。
‌CORS的实现‌：在服务器端，通过添加特定的HTTP响应头来实现CORS。例如，在Node.js环境中，可以通过设置Access-Control-Allow-Origin和Access-Control-Allow-Headers等响应头来实现CORS‌23。
JSONP的实现：
JSONP（JSON with Padding）是一种跨域请求数据的方式，它通过动态创建<script>标签请求一个带有回调函数的URL来实现。由于<script>标签不受浏览器同源政策的限制，所以可以用来从不同域名的服务器上请求数据。

JSONP的工作原理如下：
1. 网页通过添加一个<script>标签来请求远程服务器上的JSON数据。
2. 服务器接收请求，并返回一个执行回调函数的JavaScript语句。
3. 网页中的回调函数被执行，并接收到服务器返回的JSON数据。
```
<!DOCTYPE html>
<html>
<head>
    <title>JSONP Example</title>
</head>
<body>
    <script>
        // 定义一个回调函数
        function handleResponse(data) {
            console.log(data); // 这里将会输出从服务器返回的数据
        }
    </script>
    <script src="https://example.com/api/data?callback=handleResponse"></script>
</body>
</html>
```

<?php
// 假设通过GET参数接收回调函数名称
$callback = $_GET['callback'];
// 假设有一些数据要返回
$data = array('name' => 'John', 'age' => 30);
// 输出JavaScript代码，调用回调函数
echo $callback . '(' . json_encode($data) . ');';
?>

handleResponse({"name":"John","age":30});

posted on 2024-08-26 16:27 大毛猫熊阅读(14) 评论(0) 编辑收藏举报

刷新页面返回顶部

大毛猫熊

面试题——跨域问题

导航