动力节点Vue3课程笔记——四、Vue与AJAX

四、Vue与AJAX

4.1 回顾发送AJAX异步请求的方式

发送AJAX异步请求的常见方式包括：

原生方式，使用浏览器内置的JS对象XMLHttpRequest

• const xhr = new XMLHttpRequest()
• xhr.onreadystatechange = function(){}
• xhr.open()
• xhr.send()

原生方式，使用浏览器内置的JS函数fetch

• fetch(‘url’, {method : ‘GET’}).then().then()

第三方库方式，JS库jQuery（对XMLHttpRequest进行的封装）

• $.get()
• $.post()

第三方库方式，基于Promise的HTTP库：axios （对XMLHttpRequest进行的封装）

• axios.get().then()

axios是Vue官方推荐使用的。

4.2 回顾AJAX跨域

什么是跨域访问？

在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。

哪些跨域行为是允许的？

• 直接在浏览器地址栏上输入地址进行访问
• 超链接
• <img src=”其它网站的图片是允许的”>
• <link href=”其它网站的css文件是允许的”>
• <script src=”其它网站的js文件是允许的”>
• ......

哪些跨域行为是不允许的？

• AJAX请求是不允许的
• Cookie、localStorage、IndexedDB等存储性内容是不允许的
• DOM节点是不允许的

AJAX请求无法跨域访问的原因：同源策略

• 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
• AJAX请求不允许跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

解决AJAX跨域访问的方案包括哪些

① CORS方案（工作中常用的）

• 这种方案主要是后端的一种解决方案，被访问的资源设置响应头，告诉浏览器我这个资源是允许跨域访问的：response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");

② jsonp方案（面试常问的）

• 采用的是<script src=””>不受同源策略的限制来实现的，