![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：跨域请求中, 99.99%都是GET请求, 所以jsonp几乎可以用在任何场景中, 也是目前的主流, 请给予足够的关注
Collection
Collection
http://www.php.cn:80和ftp://www.php.cn:80 不同域，协议不一样http://www.php.cn:80和http://www.baidu.com:80 不同域，主机名不一样http://www.php.cn:80和ftp://www.php.cn:8080 不同域，端口号不一样http://www.php.cn:80/a.html和http://www.php.cn:80/b.js 同域
CSRF 攻击。但是，既然不安全，为什么我们又要跨域请求呢？原因是有时为了服务器便于管理和减轻服务器压力，公司会把不同的资源放在不同的服务器上，这样就存在很多子域，这时比如 A子域的 html资源要去访问 B子域的图片资源就会出现跨域请求了。CORS：全称”跨域资源共享”（Cross-origin resource sharing）CORS就是跨源资源共享，这种机制利用浏览器所支持的向跨源服务器发出 xmlhttprequest 请求，所以我们只需要做的是在服务器端判断是否允许这个域访问，剩下的浏览器会自动做好，添加一些头信息。CORS 需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持 CORS，IE 则不能低于 IE10。CORS 的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送 ajax 请求并无差异。实现 CORS 的关键在于服务器，只要服务器实现 CORS 接口，就可以实现跨域通信。
Access-Control-Allow-Origin: http://localhost:80 //该字段表明可供那个源跨域Access-Control-Allow-Methods: GET, POST, PUT // 该字段表明服务端支持的请求方法Access-Control-Allow-Headers: X-Custom-Header // 实际请求将携带的自定义请求首部字段
1.Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。
2.Access-Control-Allow-Headers
如果浏览器请求包括 Access-Control-Request-Headers 字段，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。
3.Access-Control-Allow-Credentials
4.Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button>跨域请求-JSONP</button><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",//动态生成jsfunction () {//生成一个元素var script = document.createElement("script");//添加一个src地址script.src = "http://php.edu/0522/test2.php?jsonp=handle&id=3";//添加到head中document.head.appendChild(script);},false);</script></body></html>
跨域请求的处理方式有很多，除了上面提的 JSONP 策略和 CORS 策略，还有通过 window.name 属性等方式解决跨域请求。总的来说，使用 CORS 简单请求，非常容易，对于前端来说无需做任何配置，与发送普通 ajax 请求无异。唯一需要注意的是，需要携带 cookie 信息时，需要将 withCredentials 设置为 true 即可。CORS的配置，完全在后端设置，配置起来也比较容易，目前对于大部分浏览器兼容性也比较好。CORS 优势也比较明显，可以实现任何类型的请求，相较于 JSONP 跨域只能使用 get 请求来说，也更加的便于我们使用。
但 ajax 和 jsonp 其实本质上是不同的东西。ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加
天蓬老师