跨域-jsonp和cors处理

最新推荐文章于 2024-08-04 16:33:59 发布

weixiwo

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量61

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixiwo/article/details/129486548

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

浏览器的同源策略是为了安全，同源策略是协议、域名、端口都要一致

jsonp

jsonp是前端利用script标签进行跨域 http://127.0.0.1:8000/jsonp-server接口
前端页面请求
1.

<body>
    <div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

在后端接口处理的时候，由于利用的是script标签，所以需要返回js代码

app.all('/jsonp-server',(request, response) => {
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

后端返回的是js的函数，但是在前端的js代码中，需要将handle函数提前定义好

2.设计一个在光标离开input框时，然后发送请求

<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur =function(){
        let username = this.value;
        //向用户发送请求 检测用户名是否存在
        //1.创建script标签
        const script=document.createElement('script');
        //2.设置标签的src属性
        script.src='http://127.0.0.1:8000/check-username'
        //3.将script插入到文档中
        document.body.appendChild(script)
        }
    </script>
</body>

在express后端搭建的简单服务器，对应check-username处理的函数

app.all('/check-username',(request, response) => {
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    response.end(`handle(${str})`);
});

CORS处理

<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function(){
            const x = new XMLHttpRequest();
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>

在前后端交互中，可以直接在后端中设置
Access-Control-Allow-Origin 允许所有的源来处理

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});