JSONP为什么可以实现跨域呢-CFANZ编程社区

JSONP为什么可以实现跨域呢

前言

大家有没想过这个问题💤？

一时想不起来的话就往下看吧，哈哈哈~

一般情况下面试官可能不会问你原理，只问你有哪几种实现跨域的方法，有那些优缺点，可能你就八股文一顿输出，巴拉巴拉，但假如问你了呢，会不会语塞呢，哈哈哈~

emmm... 不大清楚的话那我们简单了解下原理~ 查缺补漏💪

原理

简单点来说就是动态创建script标签并注入我们的get请求，从而绕开了浏览器的同源策略~

但最终允不允许资源请求访问还得看服务端有没开放访问权限~

跨域请求涉及的知识点还是蛮多的，这里我就不展开讲了，还是先看下怎么简单地去走通JSONP流程吧~

代码实现

服务端：

const express = require('express');
const app = express();

app.get('/cheng', (req, res) => {
    const callback = req.query.callback;
    const data = { message: "Hello, $程!" };
    res.send(`${callback}(${JSON.stringify(data)})`);
});

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

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP</title>
</head>
<body>
    <h1>JSONP</h1>
    <div id="app"></div>

    <script>
        function handleData(data) {
            document.getElementById('app').innerText = data.message;
        }

        function queryJSONP(url) {
            const script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }

        const url = 'http://localhost:3000/cheng?callback=handleData';
        queryJSONP(url);
    </script>
</body>
</html>

效果

JSONP为什么可以实现跨域呢_Server

0 条评论