一文搞懂跨源请求相关问题

1.了解什么是跨源？

前端调用的后端接口不属于同一个域，这就是跨域。简单来理解就是协议、域名和端口有任意一个不一样的情况下请求数据，就会被认为是跨域。跨域请求如果没被特殊处理的话，就会报错。

服务器端代码(NodeJS)

import express from 'express';
const app = express();
let port = 7000;
let ip = '127.0.0.1'
let userObj = {name :'hzh',age : 29,sex : '男'
}
app.get('/user',(req,res) => {// res.setHeader('Access-Control-Allow-Origin','*');res.send(userObj);
})app.listen(port,() => {console.log(`your sever is running at http://${ip}:${port}`)
})

客户端代码

document.querySelector('button').addEventListener('click',() =>{let xhr = new XMLHttpRequest();xhr.onload = function(){if((xhr.status === 200 || xhr.status < 300) || xhr.status === 304){console.log(xhr.responseText);}else{console.log('requset error');}}xhr.open('GET','http://127.0.0.1:7000/user',true);xhr.send(null);
})

会出现以下错误，因为没有对请求进行特殊处理，则请求会被跨源政策（同源策略）所拦截并爆出错误

2.什么是同源策略？

同源策略(协议、域名、端口号相同就称为同源)是浏览器的安全策略，它用于限制一个