vue学习（44）配置代理

知识点

1. 发送ajax常用的一些技术
   1. xhr: new XMLHttpRequest()
   2. fetch(和xhr平级，IE兼容性差)
   3. jquery封装xhr(如$.post,$.get等)
   4. axios封装xhr

2. 协议、主机名、端口、任意不同即为跨域。跨域请求是发出去了，只是拿不到而已。（1：cors, 2：jsonp只能解决get请求，利用script标签在引入外部资源不受同源限制的策略 3：利用代理服务器）

   
   image.png
3. public文件夹相当于8080这台服务器的根路径，如果public有的，就不会再去5000找
4. 使用vue-cli配置代理，写在vue.config.js中

 // 打开代理服务器（方式1）
    devServer:{
       proxy:'http://localhost:5000'
    }
    // 打开代理服务器（方式2）
    devServer:{
        proxy:{
            //前缀/api跟在端口后面
            '/api':{
                target:'http://localhost:5000',
                // 不加这个会发现是404，是因为请求到5000也带上了/api
                pathRewrite:{
                    '^/api':''
                },
                ws:true, //用于支持websocket
                changeOrigin:true //用于控制请求头中的host值
            },
            //前缀可以控制是否走代理
            '/peiqi':{
                target:'http://localhost:5001',
                // 不加这个会发现是404，是因为请求到5000也带上了/api
                pathRewrite:{
                    '^/peiqi':''
                },
                ws:true, //用于支持websocket
                changeOrigin:true //用于控制请求头中的host值
            }
        }