jsonp跨域处理，前端是怎么写的你知道吗

whisper2025-03-21 10:01

以下是使用 JSONP 实现跨域处理时前端的一般写法：

创建回调函数：
- 首先，在前端页面中定义一个回调函数，该函数将在从服务器接收到数据后被调用，用于处理返回的数据。例如：

javascript

javascript 复制代码

function processData(data) {
    // 在这里对返回的数据进行处理，比如将数据显示在页面上
    console.log(data);
    document.getElementById('result').innerHTML = `姓名：${data.name}, 年龄：${data.age}`;
}

动态创建<script>标签：
- 然后，通过 JavaScript 动态创建一个<script>标签，将其src属性设置为要请求的跨域接口地址，并在地址中指定回调函数的名称。例如：

javascript

ini 复制代码

let script = document.createElement('script');
// 假设接口地址为http://example.com/api/getData，?callback=processData是指定回调函数
script.src = 'http://example.com/api/getData?callback=processData';
document.head.appendChild(script);

当浏览器加载这个<script>标签时，会向指定的跨域接口发送请求，服务器接收到请求后，会将数据以指定的回调函数包裹并返回，例如返回processData({name: "张三", age: 25})，浏览器接收到响应后会执行processData函数，并将数据作为参数传入，从而实现了跨域获取数据并处理的功能。

清理<script>标签（可选） ：
- 如果不需要再次使用该<script>标签，可以在数据处理完成后将其从页面中移除，以避免不必要的资源占用和潜在的冲突。例如：

javascript

ini 复制代码

script.onload = function() {
    document.head.removeChild(script);
};

需要注意的是，JSONP 只支持 GET 请求，并且需要服务器端的配合来返回正确格式的数据。如果服务器端返回的数据格式不符合 JSONP 的要求，即不是以指定的回调函数包裹，那么前端将无法正确处理数据。同时，由于 JSONP 是通过<script>标签加载外部资源，存在一定的安全风险，如可能受到跨站脚本攻击（XSS），因此在使用时需要确保接口的安全性和数据来源的可靠性。