AJAX笔记二之跨域篇
如何理解什么是跨域AJAX?
由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。
因为script标签的src属性是没有跨域的限制的。
浏览器同源策略并不是对所有的请求均制约：
-
制约： XmlHttpRequest
-
不制约： img、iframe、script等具有src属性的标签
跨域的两种解决方案:
JSONP
JSONP(JSON with Padding) 是一个非官方的跨域解决方案，纯碎凭借开发者的聪明才智开发出来，只支持 get 请求
# JSONP 如何工作
在网页有一标签天生具有跨域能力，比如 img link iframe script
JSONP 就是利用 script 标签的跨域能力来发送请求的
# JSONP 的使用
1.动态的创建一个 script 标签
var script = document.createElement('script');
2.设置script 的src 属性，设置回调函数
script = 'http://locallhost:3000/testAJAX?callback=abc';
# 使用script标签接收的响应数据必须是js代码格式
CORS
比较常用
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access control CORS
# CORS 是什么
CORS(Cross-Origin Resource Sharing),跨域资源共享，CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求，跨域资源共享标
准新增了一组 HTTP 首部字段，允许服务器声明那些源站通过浏览器有权限访问那些资源
# CORS 怎么工作
CORS 是通过设置一个相应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
# CORS 的使用
主要是服务器端的设置
router.get('/testAJAX',function(reg.res){})
# 需要设置特殊的响应头 * 号表示所有类型的头信息都接收 也可以单独设置指定的接口
// 设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Contorl-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Method','*');
response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
response.send('hello cors');
同步与异步请求
// 异步请求 open 的第三个参数设置为 true 或不设置，默认值也会为true
xhr.open('GET','/server')
xhr.open('GET','/server',true);
// 同步请求 open 第三个参数设置为 false
xhr.open('GET','/server',false)
补充内容:
1,如何使用简单的方式来检测是否跨域?
比对两个资源的 URL
eg:
如果两个 URL 的『协议』『域名』和『端口』都是相同的, 则表明它们是同源的
如果两个 URL 的『协议』『域名』和『端口』,其中有一个或者多个是不相同的, 则它们就是跨域的
2,效果异常的调试步骤
1.1 检查控制台是否有报错
2.1 检查网络控制台, 请求与响应是否正常
3,免费的接口-->可以作为练习小案例使用
- 段子 诗词 名言 https://api.apiopen.top/
- 图片接口 https://source.unsplash.com/
