当前打开的浏览器的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端口监听中......");
});