![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：跨域看来是整明白了, 辛苦
Collection
Collection
CORS: 跨域资源共享JSONP:通过标签和属性发起一个跨域
同源策略：多个页面协议、域名、端口完全一样
同源策略: 针对脚本，不针对标签
如果服务器上脚本设置允许访问，则可以访问，允许访问请求头header('Access-Control-Allow-origin: // + 允许访问的域名')
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ajax-GET</title><!--从后端拿数据到前端--></head><script>// 1. 创建Ajax对象var xhr = new XMLHttpRequest();// 2. 监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}};// 3. 初始化请求参数xhr.open("GET", "http://php.io/0518/test1.php", true);// 4. 发送请求xhr.send(null);</script><body><button>CORS跨域请求</button><h2></h2></body></html>
演示效果截图：
请求返回的数据通过回调函数来处理
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>跨域请求-JSONP</title></head><body><button>跨域请求-JSONP</button></body><script>// 1. 准备好回调处理函数function handle(jsonData) {console.log(jsonData);var data = JSON.parse(jsonData);console.log(data);// 将接口返回的数据渲染到页面中var ul = document.createElement("ul");ul.innerHTML += "<li>" + data.title + "</li>";ul.innerHTML += "<li>姓名:" + data.user.name + "</li>";ul.innerHTML += "<li>邮箱: " + data.user.email + "</li>";document.body.appendChild(ul);}// 2. 点击按钮发起一个基于JSONP的跨域请求var btn = document.querySelector("button");btn.addEventListener("click", function () {var script = document.createElement("script");script.src = "http://php.io/0518/test2.php?jsonp=handle&id=3";document.head.appendChild(script);}, false);</script></html>
<?php// 这里返回的是JOSN格式，只支持utf-8，要设置字符集header('content-type:text/html;charset=utf-8');$callback = $_GET['jsonp'];$id = $_GET['id'];// 根据查询条件返回不同内容$users = ['{"name":"admin", "email":"admin@php.cn"}','{"name":"alam", "email":"alam@php.cn"}','{"name":"oanh", "email":"oanh@php.cn"}',];if(array_key_exists(($id-1), $users)) {$user = $users[$id-1];}$json = '{"title":"用户信息", "user":'.$user.'}';echo $callback .'('.json_encode($json).')';
演示效果截图：
CORS 操作相对简单，但是不一定能用，需要服务器允许。JSONP操作相对复杂，但是没有限制。
