proxy配置代理——解决的跨域问题

·  阅读 2566

一.发送ajax请求的方式

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

二.跨域产生的原因

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

三.对跨域的误解

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

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

跨域产生的原因.jpg

四.跨域的解决办法

  1. cors:服务器端配置,不用前端配置(真正意义上的解决跨域)
  2. jsonp:利用script标签的src属性不受同源策略限制的特点,但只能解决get请求,需前后端配合
  3. 代理服务器:与前端页面同源,由他返回的数据就不存在跨域的问题,如图。

(备注:代理服务器与服务器之间是非同源,但不存在跨域问题,是因为服务器之间采用的是http请求,而不是ajax技术

代理服务器.jpg

五.配置代理服务器:

  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与前端地址相同
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改