首页jsonp解决跨域问题

jsonp解决跨域问题

时间: 2025-01-16 13:38:25 浏览: 29

### 使用 JSONP 实现跨域请求 JSONP (JSON with Padding) 是一种通过 `<script>` 标签来绕过浏览器同源策略的技术[^1]。当页面需要向另一个域名下的服务器发送请求并获取数据时，可以通过动态创建 `<script>` 标签的方式加载远程资源。 #### 动态创建脚本标签为了实现 JSONP 请求，在客户端可以编写如下 JavaScript 代码： ```javascript function createScriptTag(url, callbackName) { const script = document.createElement('script'); window[callbackName] = function(data){ console.log(`Received data from server: ${data}`); // 处理返回的数据 }; script.src = `${url}?callback=${callbackName}`; document.body.appendChild(script); } ``` 这段代码定义了一个函数 `createScriptTag` 来构建一个新的 `<script>` 元素，并将其附加到文档中。URL 参数中的 `callback` 表示回调函数名，该名称应与服务端响应一致以便执行相应的处理逻辑[^2]。 #### 服务端配合为了让上述方法正常工作，服务端也需要做相应调整。对于来自特定 URL 的 GET 请求，应该返回一段可执行的 JavaScript 代码而不是纯 JSON 数据。例如: ```json // 假设这是原始 JSON 数据 {"name": "Alice", "age": 25} // 经过 JSONP 封装后的实际响应内容 myCallback({"name": "Alice", "age": 25}); ``` 这里假设客户端指定了名为 `myCallback` 的回调函数，则服务端会将这个字符串作为前缀加上去形成完整的 JSONP 结果[^3]。

阅读全文