一.同源
1.什么是同源:如果两个页面协议,域名,端口都相同,那么就属于同源,只要其中一个不相同,那就是非同源
2.同源政策的目的:保护用户信息安全 ,A网站在客户端的cookie,B网站时获取不到的
二.解决同源限制
1.JSONP:script标签没有同源问题,通过利用script标签里的src属性指定服务器端网站,服务器端返回一个函数的调用,把要传的数据放在函数的实参中,在客户端准备这个函数的定义
①.客户端:
<script src="要访问的地址"></script> // 访问客户端地址
<script>
fn(x){
console.log(x)
}
</script>
②.服务器端:
const data = 'fn({name="zhangsan",age=10})'
app.get('/add',(req,res) => {
res.send(data)
})
③.模拟ajax请求
<button>点我发送请求<button>
<script>
var btn = document.querySelector('button')
btn.onclick = function(){
var script = document.createElement('script')
script.src = 'http://localhost:3000/add?callback=fn'
document.body.appendChild(script)
script.onload = function(){
document.body.removeChild(script)
}
}
<script>