新手第一次对跨域的理解

130 阅读1分钟

什么是同源

源: window.origin 或者 location.origin 可以获得当前源

源 = 协议 - 域名 - 端口号 如果js原型在 A 里面,那么就只能获取当前 源A里面的数据 不能获取 源A 之外的 数据

如果没有同源策略, 那么信息隐私就会没有,无法区分发送者是谁

如果两个 URL的 协议 域名 端口号 完全一致 那么这两个URL就是同源

跨域关键知识

  1. 同源策略:浏览器故意设计的功能限制
  2. CORS : 图片浏览器限制的一个解决办法
  3. JSONP : IE时代的妥协

JSONP跨域

因为浏览器不支持CORS,因此用 JS 来拿到其他浏览器的数据进行跨域,用回调来请求数据。 优点: 支持IE 和 跨域 缺点: 不能像AJAX 那么精确,JSONP不支持 POST

封装JSONP

function jsonp(url){
	// 创建 Promise 
	return new Promise((resolve,reject) =>{
    	const random = 'cui'+ Math.random() // 随机的名字防止重名
        window[random] = data = {
        // 成功 调用 resolve
        	resolve(data)
        }
        const script = document.createElement('script')
        // 业界通用名字 callback 
        script.src = '{url}?callback=${random}'
        script.onload = () =>{
        	// 删除多余的 script 标签
        	script.remove()
        }
        script.onerror = () =>{
        	// 失败调用 reject
            reject()
        }
        document.baody.appendChild(script)
    })
}

jsonp(`http://qq.com:8888/friends.js`)

CORS 跨域

解决跨域的办法,在node.js里面设置响应头

设置让谁可以访问我的数据例如 :

cui.com:9999可以访问http://qq.com:888… 的数据

response.setHeader('Access-Control-Allow-Origin','http://cui.com:9999')