4.1 发送AJAX异步请求的方式
发送AJAX异步请求的常见方式包括：
4.1.1. 原生方式
使用浏览器内置的JS对象XMLHttpRequest
const xhr = new XMLHttpRequest()
xhr.open()
xhr.send()
xhr.onreadystatechange = function(){}
4.1.2. 原生方式
使用浏览器内置的JS函数fetch
fetch('url', {method : 'GET'}).then().then()
//第一次.then返回的是promise，第二次.then,才可以得到结果
4.1.3. 第三方库方式
jQuery（对XMLHttpRequest进行的封装）
$.get()
$.post()
$.ajax()
······
axios:基于Promise的HTTP库：axios （对XMLHttpRequest进行的封装）
axios.get().then()
axios.post().then()
axios.put().then()
axios.patch().then()
axios.delete().then()
·····
axios是Vue官方推荐使用的。
vue-resource
跟axios一样使用
- 安装：npm i vue-resource
- main.js中 import vueResource from 'vue-resource'
- main.js中 使用插件：Vue.use(vueResource)
- 使用该插件之后，项目中所有的vm和vc实例上都添加了：$http属性。
- 使用办法：
this.http.get('').then() 用法和axios相同，只不过把axios替换成this.http
4.2 AJAX跨域
1. 什么是跨域访问？
(1) 在a页面中想获取b页面中的资源，如果a页面和b页面所处的协议、域名、端口不同（只要有一个不同），所进行的访问行动都是跨域的。
(2) 哪些跨域行为是允许的？
① 直接在浏览器地址栏上输入地址进行访问
② 超链接
③ <img src="其它网站的图片是允许的">
④ <link href="其它网站的css文件是允许的">
⑤ <script src="其它网站的js文件是允许的">
⑥ ......
(3) 哪些跨域行为是不允许的？
① AJAX请求是不允许的
② Cookie、localStorage、IndexedDB等存储性内容是不允许的
③ DOM节点是不允许的
2. AJAX请求无法跨域访问的原因：同源策略
(1) 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
(2) AJAX请求不允许跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。
3. 解决AJAX跨域访问的方案包括哪些
(1) CORS方案（工作中常用的）
① 这种方案主要是后端的一种解决方案，被访问的资源设置响应头，告诉浏览器我这个资源是允许跨域访问的：
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
response.setHeader("Access-Control-Allow-Origin", "*");
(2) jsonp方案（面试常问的）
① 采用的是<script src="">不受同源策略的限制来实现的，但只能解决GET请求。
(3) 代理服务器方案（工作中常用的）
① Nginx反向代理
② Node中间件代理
③ vue-cli（Vue脚手架自带的8080服务器也可以作为代理服务器，需要通过配置vue.config.js来启用这个代理）
(4) postMesssage
(5) websocket
(6) window.name + iframe
(7) location.hash + iframe
(8) document.domain + iframe
......
4. 代理服务器方案的实现原理
同源策略是浏览器 需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略的。
4.3 代理服务器
Vue脚手架内置服务器的地址：http://localhost:8080
我们可以额外再开启一个其它的服务器，这个服务器随意，例如：node server、Apache服务器、JBOSS服务器、WebLogic服务器、WebSphere服务器、jetty服务器、tomcat服务器......我这里选择的是基于express语言的一个服务器，这个web服务器开启了一个8000端口，提供了以下的一个服务：可以帮助我们获取到一个user列表
4.3.1、express的基本使用
官网：Express - 基于 Node.js 平台的 web 应用开发框架 - Express中文文档 | Express中文网
安装：npm init --yes 做一下初始化
npm install express --save
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response)=>{
//设置响应
response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已经启动, 8000 端口监听中....");
});
运行方式一：node 文件名.js
运行方式二：nodemon安装
可以帮助自动重启express后台服务器
https://www.npmjs.com/package/nodemon
npm install -g nodemon
安装完毕，重启severs.js
启动命令
nodemon severs.js
网址：http://127.0.0.1:8000/ 或 http://localhost:8000/
4.3.2、演示跨域问题
1、使用express打开8000服务器，自定义一个user数据
2、安装axios npm i axios
3、引入axios，并发送ajax请求
<script>
//引入axios
import axios from 'axios'
export default {
name: 'hellowrod',
data() {
return {
msg: '我是helloworld组件！'
}
},
methods: {
getuser() {
// 需求：发送AJAX请求，访问：http://localhost:8000/user
//本地内置服务器 http://localhost:8080/
axios.get('http://localhost:8000/user').then(
response =>{
console.log('服务器返回的数据：',response.data);
},
error=>{
console.log('错误信息',error.message);
}
)
}
}
}
</script>
输出结果
4.4.1、配置vue.config.js文件 报错问题
注意，这里的vue.config.js可以自己在根目录下创建，跟src同级，如果报错，可能是脚手架版本的问题
如下图报错：defineConfig is not a function报错
（1）、打开终端cd vue 文件夹
（2）、npm audit fix --force
（3）、npm install
最后重启应该可以解决
4.4.2、简单开启
vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
devServer: {
// Vue脚手架内置的8080服务器负责代理访问8000服务器
// 地址写到端口号就可以
proxy: "http://localhost:8000",
},
});
在vue文件中发送请求时，地址需要修改如下：
methods: {
getuser() {
// 原理：发送AJXA请求的时候，会优先从自己的服务器当中去找 public/user资源
// 如果找不到，就会去找代理，然后去http://localhost:8000上去找
// axios.get('http://localhost:8080/user').then(
// 当前按钮就在8080服务器上，资源也在8080上，所以http://localhost:8080可以省略
axios.get('/user').then(
response => {
console.log('服务器返回的数据：', response.data);
},
error => {
console.log('错误信息', error.message);
}
)
}
}
原理：访问地址是http://localhost:8080/user，会优先去8080服务器上找/user资源，如果没有找到才会走代理。
另外需要注意的是：这种简单配置不支持配置多个代理。
4.4.3、高级开启
支持配置多个代理
1、可以再新建一个express2.js，增加一个模拟服务器
2、vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
//2、高级开启 可以代理多个服务器
devServer: {
proxy: {
"/api": {
//凡是请求路径以/api开始的，都走这个代理
target: "http://localhost:8000",
pathRewrite: { "^/api": "" }, //路径重新，凡是/api开始的路径，都替换为空串
ws: true, //开启对websocket的支持（websocket是一种实时推动技术），默认是true
changeOrigin: true, //默认是true表示改变起源，（让对方服务器不知道我们真正的起源到底是哪里）
},
"/abc": {
target: "http://localhost:8001",
pathRewrite: { "^/abc": "" },
ws: true,
changeOrigin: true,
},
},
},
});
helloword.vue 发送ajax请求
methods: {
getuser() {
// 开启多个代理
axios.get('/api/user').then(
response => {
console.log('服务器返回的数据：', response.data);
},
error => {
console.log('错误信息', error.message);
}
)
},
getpassword() {
// 开启多个代理
axios.get('/abc/password').then(
response => {
console.log('服务器返回的数据：', response.data);
},
error => {
console.log('错误信息', error.message);
}
)
},
}
4.4、axios的封装
看axios的使用笔记