ajax跨域（jsonp）

解决跨域问题 jsonp方案，只支持get请求原理：网页一些标签如：img，link，script，iframe这些本身就带有跨域能力而jsonp就是靠script来实现跨域的

app.all('/jsonp-serve', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 定义一个对象
    const data={
        name:"jsonp"
    }
    let str=JSON.stringify(data);//将数据转化为json字符串
    response.end(`handle(${str})`);//end不会加特殊响应头
});//返回的结果是函数调用，里面的实参是我们想要的数据

1
2
3
4
5
6
7
8
9
10
11

<body>
    <div id="result"></div>
    <script>
        function handle(data){
            const result=document.querySelector('#result');
            result.innerHTML=data.name;
        }
    </script>
    <!-- 跨域调用,右键，live server打开，网络协议中可以看到对应的下面的http协议地址 -->
    <!-- 下面地址等同于../javascript/app.js -->
    <!-- <script src="http://127.0.0.1:5500/JavaScript/app.js"></script> -->
    <!-- jsonp调用的必须是js代码 -->
    <script src="http://127.0.0.1:8000/jsonp-serve"></script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

编辑

上次更新: 2023/7/11 18:57:41

← ajax跨域（cors） ajax响应JSON请求→