请求方式
1、【xhr】 new XMLHttpRequest() xhr.open() xhr.send （过于繁琐）
2、jQuery $.get $.post （与Vue react不操作dom的开发思想相悖）
3、fetch （不支持ie）
4、axios （推荐使用）
视频详解
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=96
什么是跨域
当协议名、主机名、端口号不一致时，即为不同源。
当三者相同时（即同源时），方可进行通信。
跨域可理解为违背了同源策略
注解：
http://localhost:8080
其中
http 是 协议名
localhost 是 主机名
8080 是 端口号
解决跨域的方式
1、前端无需改动，由后端通过cors解决跨域（标准方式）
【实现思路】：网址请求服务器时，虽然不同源。但服务器返回数据时，会携带一些特殊的响应头，这些响应头相当于钥匙，可使浏览器放行，从而拿到服务器返回的数据。
【通信单位】：【浏览器】<-->【服务器】
举例浏览器网址：http://localhost:8080
举例服务器：http://localhost:5000
2、jsonp方式（基本不用）
【实现思路】：借用script的src引入外部资源的时候，不受同源策略限制的特点。达到获取服务器数据的目的。
【通信单位】：【浏览器】<-->【服务器】
【缺点】：只能使用get。如post、delete等请求方式都不能用。故此方式基本不用，但面试可能会考
3、Nginx配置代理
【实现思路】：配置一个和浏览器同源的代理服务器，与浏览器进行通信。再通过此服务器与后端服务器进行通信，因为服务器之间没有同源策略的限制。
【相关配置】：
server{
listen 80;
server_name localhost;
# 【***前端网址代理***，若本机ip为164，则将http://127.0.0.1:8048地址代理为http://192.168.2.164/pup#/，需在hash路由下使用】
location /pup {
proxy_pass http://127.0.0.1:8048;
# proxy_pass http://localhost:8048;
}
# 【***后端服务器接口代理***，如本机ip为171，则将http://192.168.2.164:8001(这个地址是服务器那边给的)请求接口代理为http://192.168.2.171/apip（这个地址是前端自定义的）请求接口
#有3处需要更改 location /apip --- rewrite ^/apip --- proxy_pass http://192.168.2.164:8001】
location /apip {
rewrite ^/apip/(.*)$ /$1 break;
proxy_pass http://192.168.2.164:8001;
index index.html index.htm;
###nginx与上游服务器(真实访问的服务器)超时时间 后端服务器连接的超时时间_发起握手等候响应超时时间
proxy_connect_timeout 10s;
###nginx发送给上游服务器(真实访问的服务器)超时时间
proxy_send_timeout 10s;
### nginx接受上游服务器(真实访问的服务器)超时时间
proxy_read_timeout 10s;
}
}
【通信单位】：【浏览器】<--同源-->【代理服务器】<-->【服务器】
举例浏览器网址：http://localhost:8080
举例代理服务器：http://localhost:8080
举例服务器：http://localhost:5000
4、通过Vue-Cli配置代理
【实现思路】：配置一个和浏览器同源的代理服务器，与浏览器进行通信。再通过此服务器与后端服务器进行通信，因为服务器之间没有同源策略的限制。
【配置文档】：
https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware#proxycontext-config
【相关配置】：
在vue项目的vue.config.js里配置
module.exports = {
devServer: {
proxy: {
'/api': { //配置接口后缀
target: 'http://localhost:5000', //配置服务器地址
pathRewrite: {'^/api' : ''} //匹配所有以/api为接口后缀的路径，将其替换为''，即 http://localhost:8080/api/videolist --> http://localhost:8080/videolist。此处为什么这么写？见下方
},
'/abc': { //配置第二个代理
target: 'http://localhost:5001',
pathRewrite: {'^/abc' : ''}
}
}
}
}
【通信单位】：【浏览器】<--同源-->【代理服务器】<-->【服务器】
举例浏览器网址：http://localhost:8080
举例代理服务器：http://localhost:8080
举例服务器：http://localhost:5000
【为什么要配置一个接口后缀如/api】
相当于给接口加一个识别，代理服务器会先从vue项目的public文件夹里找，如果找到videolist文件，则中止请求，不再去后端服务器请求数据。
为防止此种情况，则加一个接口后缀如/api、/abc等都可以。
然后代理服务器识别完成后再将此后缀去掉再转达给后端服务器。
【关于上方pathRewrite的解释】
不配置pathRewrite：
浏览器将http://localhost:8080/api/videolist请求递交给代理服务器。代理服务器会将此请求原封不动转达给后端服务器。获取【/api/videolist】下的数据。
配置pathRewrite：
浏览器将http://localhost:8080/api/videolist请求递交给代理服务器。代理服务器会将此请求处理为http://localhost:8080/videolist后转达给后端服务器。获取【/videolist】下的数据。
实际上后端服务器的/api/videolist下无数据，/videolist下有数据，所以pathRewrite是必要的。
