jsonp实现跨域

最新推荐文章于 2024-11-01 07:44:09 发布

原创最新推荐文章于 2024-11-01 07:44:09 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

58 篇文章

订阅专栏

博客介绍了利用HTML默认支持跨域的标签（如script、img）实现跨域的方法，还提及了服务端代码和客户端代码，但未给出具体代码内容。

HTML有些默认得标签是支持跨域的如script img等标签
所以可以通过以上标签实现跨域

服务端代码

//引入express
const express=require('express');
//创建应用对象
const app=express();
app.all('/jsonp-server',(request,response)=>{
    //jsonp实现跨域
    const data={"name":"simple"};
    let str=JSON.stringify(data);
    response.end(`handle(${str})`)
})

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #res
        {
            height: 100px;
            width: 100px;
            border: 2px solid aqua;
        }
    </style>
</head>
<body>
    <div id="res"></div>
</body>
<script>
    function handle(data)
    {
        const res=document.querySelector("#res")
        res.innerHTML=data.name
    }
</script>
<script src="http://localhost:8000/jsonp-server"></script>
</html>