原生jsonp发送跨域请求

当前打开的浏览器的url和当前页面ajax请求的url一样才叫同源
协议，端口，域名三者一样满足同源策略

使用jsonp解决跨域
script标签本身具备跨域特性,当我直接打开本地simpel.html文件的时候，那么这个文件的路径，端口，域名，都是和服务端不一致的，但是还是能够拿到服务端返回来的数据。
在这里插入图片描述

下面只是第一个按钮【同源发送ajax】是同源发送
在这里插入图片描述

下面是示例代码
1.创建在teststhirteen文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建app.js文件
4.创建server.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同源和跨源</title>
</head>
<body>
    <a href="127.0.0.1:8000/one">启动使用127.0.0.1:8000/one端口打开本网页,获取第一个按钮的数据，属于同源</a>
    <br>
    <button>同源发送AJAX请求</button>
    <h3>jsonp借助script特性进行跨域</h3>
    <p>方案一</p>
    <p>直接使用浏览器打开本simpel.html网页,接获取到app.js文件中的数据</p>
    <p>因为浏览器是执行javascript语言的，会自动执行本页面的代码，在下方的第二个script标签引入了app.js文件</p>
    <p>在控制台中将会打印app.js里面的数据</p>
    <p>方案二</p>
    <p>使用visual studio code编辑器,在simpel页面右键打开 Open with Live Server方式打开网页</p>
    <p>把第二个script标签仅仅只有src="app.js"的注释掉</p>
    <p>第三个script标签的链接换下面这个，也是可以读取数据的，说明script标签可以进行跨域</p>
    <p>http://127.0.0.1:5500/testthirteen/app.js</p>
    <button>跨源自动获取</button>
    <p>app.js里面的第二个</p>
    <div id="resulttwo" style="width: 500px;height: 50px;border: solid 2px teal;"></div>
    <p>第四个script</p>
    <div id="resultthree" style="width: 500px;height: 50px;border: solid 2px teal;"></div>
    <p>第六个script</p>
    <div id="resultsix" style="width: 500px;height: 50px;border: solid 2px teal;"></div>
    <!-- 第一个script -->
    <script>
        // 把所有的按钮标签都选择
        const btns = document.querySelectorAll('button');
        // 第一个按钮
        btns[0].onclick = function(){
     
     
            // 创建变量
            const textone = new XMLHttpRequest();
            // 因为满足同源策略,url可以简写为'/data'   127.0.0.1:8000/data
            textone.open("GET",'/two'); 
            // 发送
            textone.send();
            // 绑定事件
            textone.onreadystatechange =function(){
     
     
                if(textone.readyState === 4 ){
     
     
                    if(textone.status >= 200 && textone.status < 300){
     
     
                        console.log(textone.response);
                    }
                }
            }
        }
    </script>
    <!-- 第四个script -->
     <script>
         // 数据处理
        function handlethree (datathree){
     
     
        // 获取resulttwo 元素
        const resultthree = document.getElementById('resultthree');
        resultthree.innerHTML = datathree.name;
        };
        // 最后一个方框里面的数据处理
        // 数据处理
        function handlesix (datasix){
     
     
        // 获取resulttwo 元素
        const resultsix = document.getElementById('resultsix');
        resultsix.innerHTML = datasix.name;
        };
     </script>
    <!-- 下方二三script只取一个      因为这个是指向获取数据链接的标签， 需要摆放在最后的script标签内，否则第四个script标签的被容会报错-->
    <!-- 第二个script -->
    <!-- <script src="./app.js"></script> -->
    <!-- 第三个script -->
     <script src="http://127.0.0.1:5500/testthirteen/app.js"></script> 
     <!-- 第五个script标签 -->
     <script src="http://127.0.0.1:8000/five"></script>
     <!-- 第六个script -->
     <script src="http://127.0.0.1:8000/six"></script>
</body>
</html>

// 一
//创建变量
const dataone ={
    
    
    name:'app里面的数据'
} ;
// 执行函数
console.log(dataone);

// 二 所有执行代码在 本app.js文件中
const datatwo ={
    
    
    name:'跨源获取http://127.0.0.1:5500/testthirteen/app.js中datatwo的数据'
};
// 数据处理
function handletwo(datatwo){
    
    
    // 获取resulttwo 元素
    const resulttwo = document.getElementById('resulttwo');
    resulttwo.innerHTML = datatwo.name;
}
// 执行函数
handletwo(datatwo);


// 三  只传递  变量与执行代码
//                  1.创建变量
//                  2.执行handlethree()函数    
//                  3.另外的填入代码在simpel.html文件中
const datathree ={
    
    
    name:'服务端传递了1：变量的值2：执行函数'
};

handlethree(datathree);

// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'

// 一：访问simpel.html页面的路径为[127.0.0.1:8000/one]
app.all('/one', (request, response)=>{
    
    
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    // 使用sendFile()函数发送
    // 启动服务端后，直接访问127.0.0.1:8000端口返回一个simpel.html模板页面
    // __dirname:意思是绝对路径,本服务端启动文件的位置
    response.sendFile(__dirname +'/simpel.html');
});

// 二：访问[127.0.0.1:8000/two]路径获取字符串数据
app.all('/two', (request, response)=>{
    
    
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('127.0.0.1:8000/two链接返回来的字符串格式数据');
});
// html第五个标签获取的数据
app.all('/five', (request, response)=>{
    
    
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send("console.log('第五个script标签链接，这里返回去给浏览器的是一个执行类型的json代码，而不是数据')");
});
// html第六个标签获取数据
app.all('/six',(request,response)=>{
    
    
    const datasix = {
    
    
        name: 'fetch函数通用ajax请求的post请求方法，服务端设置了json格式返回'
    };
    // 把数据转化为字符串
    let str = JSON.stringify(datasix);
    // 下面这里的代码注意了[`]为键盘esc下方的符号
    response.end(`handlesix(${
      
      str})`);
});



// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
    
    
    console.log("本条信息为回调，说明服务已经启动，8000端口监听中......");
});

原生jsonp发送跨域请求

猜你喜欢