同源策略是浏览器的一种安全策略，
同源指的是：协议、域名、端口、必须完全相同。
违背同源策略就是跨域。
而AJAX是默认遵循同源策略的；
同源说通俗一点呢就是页面跟获取请求的接口是来自同一个服务器，如果不在同一个服务器下就需要设置跨域请求。
下面来给大家演示一个小小的例子
启动服务器 转到该网页，在这个网页里面请求本端口的数据是不需要进行一个跨域操作的 是可以直接请求的
const { request, response } = require('express');
const express = require('express');
const app = express();
app.get('/home',(request,response) => {
//响应一个页面
response.sendFile(__dirname + '/index.html');//新建一个html
// response.send("")
})
app.get("/data",(request,response) =>{
response.send("用户数据")
})
app.listen(9000,()=>{
console.log("端口服务启动成功")
});
下面是html的代码
<!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>首页</title>
</head>
<body>
<h1>陈西瓜</h1>
<button>点击获取用户数据</button>
<script>
const btn = document.querySelector("button");
btn.onclick = function(){
const x = new XMLHttpRequest();
//因为这里是满足同源策略的，所以url可以简写
x.open("get","/data")
//发送请求
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >=200 && x.status < 300){
console.log(x.response);
}
}
}
}
</script>
</body>
</html>
如何解决跨域
JSONP
JSONP,是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，
但是它只支持get请求
JSONP的工作原理
在网页有一些标签天生就具有跨域的能力，比如：img，link，iframe，script
JSONP 就是利用script标签的跨域能力来发送请求的
JSONP的使用
html代码
<!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>原理演示</title>
<style>
#result{
height: 200px;
width: 300px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="result">
</div>
<script>
function handle(data){
//获取 result元素
const result = document.getElementById('result');
result.innerHTML = data.name;
}
</script>
// <script src="./app.js"></script>其中一种方法
<script src="http://localhost:8000/jsonp-server"></script>
</body>
</html>
server.js代码
//jsonp 规则
app.all('/jsonp-server',(requset,response) =>{
const data = {
name:'goubi'
}
const str = JSON.stringify(data);
response.end(`handle(${str})`)
})
app.js代码
const data = {
name:'陈西瓜ss'
}
//处理数据
handle(data);
CORS跨域
就是在服务器的代码里面加入响应头设置
即下方的语法
response.setHeader("")
Access-Contol-Allow-Origin","*"
//Cors
app.all('/cors-server',(request,response)=>{
//设置了响应头可跨域
response.setHeader("Access-Contol-Allow-Origin","*");
response.setHeader('Access-Contol-Allow-Headers','*');
response.setHeader('Access-Contol-Allow-Method',"*");
response.send("hello cors");
})
