跨域请求的解决

最新推荐文章于 2023-08-31 06:27:09 发布

2333!!!!!

最新推荐文章于 2023-08-31 06:27:09 发布

阅读量261

点赞数

分类专栏： ajax学习文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_46564011/article/details/123318786

版权

jsonp 跨域请求服务器响应头 CORS script标签

关键词由CSDN通过智能技术生成

ajax学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    跨域请求一共学习两种解决方式一种是服务端设置响应头为 Access-Control-Allow-Origin '*'所有来源 或 指定协议 ip 端口 的url,
    服务端设置响应头还支持很多功能 可以自己上网搜
    第二种是jsonp 利用了script 标签本身就支持跨域访问 直接在 script 标签中设置src为服务器路径使服务器处理完成后返回 js 的代码或函数
    调用来显示,jsonp 只支持get请求
    我在这里只实验jsonp ,Access-Control-Allow-Origin 一直在用
-->
<input type="text" id="t1">
<!--因为我的网页是用file协议访问的所以与服务器是跨域的-->
<div id="view" style="width: 200px;height: 300px;border:1px solid blueviolet"></div>
<script>
    let t1=document.getElementById("t1");
    let view=document.getElementById("view");
    function handleView(data){
        view.innerText=data.msg;
    }
    t1.οnblur=function() {
        let username=this.value;
       if (username===""||username===null||username===undefined) {
           view.innerText="你什么都没有输入";
       }else {
           const script = document.createElement("script");
           script.src = 'http://localhost:8000/ky-server?username=' + username;
           //jsonp 就是相当于你用一个jquery的jscdn连接去使用jquery是通过网络来访问使用jquery而不是去下载他
           //那么他就会先去访问jquery的cdn网站这就是一个跨区访问网站,那么你也就可以使用script标签去访问你的ajax接口
           //创建script标签加上参数,还要把他真正添加到body尾部
           document.body.appendChild(script);
       }
    }
</script>
</body>
</html>