跨域资源共享
1.CORS是什么
//1.CORS是什么
//const url = 'https://www.imooc.com';//不同域
const url ='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
}
};
xhr.open('GET', url, true);
xhr.send(null);
//Access-Control-Allow-Origin: *
//表名允许所有域名来跨域请求它，*是通配符，没有任何限制
//只允许指定域名的跨域请求
Access-Control-Allow-Origin:http://127.0.0.1:5500
2.使用CORS跨域的过程
浏览器发送请求
后端在响应头中添加Access-Control-Allow-Origin 头信息
浏览器接收到响应
如果是同城下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
如果是跨域请求，浏览器会从响应头中查找是否允许跨越访问
如果允许跨域，通信圆满完成
如果没有找到或者不好含想要跨域的域名，就丢弃响应结果
3.CORS的兼容性
IE10及以上版本的浏览器可以正常使用CORS
JSONP
1.JSONP的原理
script标签跨域不会被浏览器阻止
JSONP主要就是利用script标签，加载跨域文件
2.使用JSONP实现跨域
服务器端准备好JSONP接口
https://www.imooc.com/api/http/jsonp?callback=handleResPonse
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP</title>
</head>
<body>
<script>
//1.JSONP的原理
//script标签跨域不会被浏览器阻止
//JSONP主要就是利用script标签，加载跨域文件
//2.使用JSONP实现跨域
//服务器端准备好JSONP实现跨域
//手动加载JSONP接口 或者动态加载JSONP接口
const script = document.createElement('script');
script.src ='https://www.imooc.com/api/http/jsonp?callback=ab';
document.body.appendChild(script)
//声明函数
const ab = data =>{
console.log(data)
};
/* ab({
"code": 200, "data": [ { "word": "jsp" },
{ "word": "js" }, { "word": "json" },
{ "word": "js 入门" }, { "word": "jstl" } ] });
*/
</script>
<!-- <script src="https://www.imooc.com/api/http/jsonp?callback=ab"></script> -->
<!-- 相当于 -->
<!-- <script>
{ "code": 200, "data": [ { "word": "jsp" }, { "word": "js" }, { "word": "json" }, { "word": "js 入门" }, { "word": "jstl" } ] }
</script> -->
</body>
</html>
标签：资源共享,word,跨域,script,xhr,JSONP,浏览器 From： https://www.cnblogs.com/x3449/p/17246833.html