一.发送ajax请求的方式

1. xhr(XMLHttpRequest)：xhr.open()、xhr.send()
2. jQuery：封装了XHR，体积小，支持请求、响应拦截器
3. axios：封装了XHR，vue官方推荐
4. fetch：跟xhr平级，但是对IE浏览器的兼容性不好

二.跨域产生的原因

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作跨域。

三.对跨域的误解

当浏览器向服务器发起请求时，即使存在跨域问题，服务器依旧是会响应请求，并返回数据给浏览器，但当浏览器拿到数据后发现存在跨域问题了，这时候浏览器就不会将数据给页面，相当于把数据给扣留了（如下图）。

并不是说，发生跨域时请求根本就发不出去，或者服务器拿到请求不会响应啥的，这些都是错误的想法（我之前就是这么觉得的）。

四.跨域的解决办法

1. cors：服务器端配置，不用前端配置(真正意义上的解决跨域)
2. jsonp：利用script标签的src属性不受同源策略限制的特点，但只能解决get请求，需前后端配合
3. 代理服务器：与前端页面同源，由他返回的数据就不存在跨域的问题，如图。 （备注：代理服务器与服务器之间是非同源，但不存在跨域问题，是因为服务器之间采用的是http请求，而不是ajax技术）

五.配置代理服务器：

1. nginx （相对繁琐，且需要一定的后端知识）
2. proxy：（相对简单，熟悉一定的webpack配置即可） 配置单个代理：

// vue.config.js/webpack.config.js 
// 优点：配置简单 
// 缺点：不能灵活控制请求是否走代理，因为都会走代理 
module.exports={
     devServer:{
         proxy:'http://xxx.xxx.xxx:5000' 
     } 
}
复制代码

配置多个代理：

// vue.config.js/webpack.config.js 
// 优点：可以配置多个代理，且可灵活控制请求是否走代理 
// 缺点：配置繁琐，发起代理请求时必须加上配置好的前缀
module.exports={
    devServer:{
        proxy:{
            '/api01':{
                target:'http://xxx.xxx.xxx:5000',
                changeOrigin:true,
                // 重写请求，根据接口详情，判断是否需要
                pathRewrite:{
                    '^/api01':''
                }
            },
            '/api02':{
                target:'http://xxx.xxx.xxx:5001',
                changeOrigin:true,
                // 重写请求，根据接口详情，判断是否需要
                pathRewrite:{
                    '^/api02':''
                }
            }
        }
    }
}
// changeOrigin设置为true时，服务器收到的请求头的host与服务器地址相同
// changeOrigin设置为false时，服务器收到的请求头的host与前端地址相同
复制代码