浏览器的同源策略是为了安全，同源策略是 协议、域名、端口 都要一致
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');
});