1.在js 响应头设置代码字段,允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.setHeader("Access-Control-Allow-Credentials", "true");
// response.setHeader("Access-Control-Allow-Methods", "*");
注意:Headers不要敲错了少加s
// 1.引入express
const { response } = require("express");
const { request } = require("express");
const express = require("express")
// 2.创建应用对象
const app = express();
// 3.创建路由规则
app.get('/server', (request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('hello AJAX');
});
// 4.监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已启动,8000 端口持续监听中...........")
});
2.IE缓存问题处理
原理:加当前的时间戳,让ie认为发送的不同请求,这样就能解决ie缓存问题
xhr.open('GET','http://127.0.0.1:8000/json-server/ie?t='+Date.now());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON数据响应</title>
<style>
#result{
width: 200px;
height: 100px;
border: 1px solid #666;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.querySelector('#result');
//绑定按下键盘事件
window.onkeydown = function(){
//发送请求
const xhr = new XMLHttpRequest();
// 设置响应体格式
xhr.responseType = 'json';
// 初始化
xhr.open('GET','http://127.0.0.1:8000/json-server/ie?t='+Date.now());
// 发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response.name+'</br>'+xhr.response.jineng);
result.innerHTML = xhr.response.name + '</br>'
+xhr.response.jineng;
} else {
}
}
}
}
</script>
</body>
</html>