js 跨域解决方案之Jsonp简单案例

新建html 文件内容如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jsonp 跨域请求</title>
</head>
<script>
    function abc(data){
        if(data){
            document.querySelector('p').innerHTML=JSON.stringify(data)
        }
    }
    //Jsonp 跨域请求
    function request(url){
        const script=document.createElement('script');
        script.src=url;
        //防止页面污染 js加载执行完毕后移除
        script.onload=function(){
            script.remove();
        }
        //添加script
        document.body.appendChild(script)
    }
    function getUserInfo(){
        request('./test.js')//请求地址 允许跨域
    }
</script>
<body>
 <button onclick="getUserInfo()">用户信息</button>
 <p></p>
</body>
</html>

 

新建test.js文件,模拟服务器接口返回。实际使用中可以是跨域的任何api数据。

test.js 文件内容如下：

abc({name:'john',age:30})

tips：

服务器端返回的数据需要 包一层 和客户端约定好的方法名。正常接口返回数据 {name:'ls',age:30}，如果使用 jsonp 则 返回 abc({name:'ls',age:30})

解决跨域问题 推荐服务器端响应头添加

Access-Control-Allow-Origin:'允许域名'

如果服务器无法更改，前端可以起一个node服务器，用node服务器请求后返回数据，并在响应头里添加Access-Control-Allow-Origin 

还有一种方式 就是让运维配置nginx

posted @ 2023-10-13 22:28  暴燥的小蓝鲸  阅读(173)  评论(0)    收藏  举报