JSONP跨域及原理

JSONP跨域及原理

一、案例

  • 前端
DOCTYPE html>
<html>
<head>
    <title>JSONP Exampletitle>
head>
<body>
    <h1>JSONP Exampleh1>
    <script>
        // 定义一个全局的回调函数
        function handleResponse(data) {
            console.log("Received data:", data);
        }
        
        // 动态创建script标签,请求跨域数据
        var script = document.createElement('script');
        script.src = 'http://api.example.com/data?callback=handleResponse';
        document.body.appendChild(script);
    script>
body>
html>

  • 服务端nodejs(express)
const express = require('express');
const app = express();

// 跨域数据接口
app.get('/data', (req, res) => {
    const data = { message: 'Hello from server!' };
    const callback = req.query.callback; // 获取回调函数名称
    const response = callback + '(' + JSON.stringify(data) + ')'; // 封装数据并回调

    res.setHeader('Content-Type', 'application/javascript');
    res.send(response);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中,前端页面通过动态创建

你可能感兴趣的:(前端)