vue配置跨域出来重定向（vue中的proxy代理的使用（解决跨域问题））

声明

 1. 首先我们应该知道    
    
    
  ，前端axios在本地发送的请求如果你不把路径写全   


     


     


     
，它都是会默认加上自己项目所在的端口



 




 




 




，就比如说：

axios.get(/login)

axios.get(/hello)

当我点击发送按钮之后   

   

   

 ，以上两行代码实际为：

http://localhost:8080/login

http://localhost:8080/hello

其中 localhost:8080 就是自己项目所在的地址了  
    
    
    
。实际前端就会根据以上的地址来访问后端程序了

     


     


     


  。

2. 跨域    

     

     

     ，什么是跨域呢？

首先




  




  




  




，明白什么是同源策略？同源就是指 协议    
    
    
  、域名   


     


     


     
、端口 都要相同  


  


  


，其中任何一个不同都会出现跨域 




 




 




 
。例如：

http://www.baidu.com:8000

// http 是协议

// www.baidu.com 是域名

// 8000 是端口

跨域     
     
     
     ，是指浏览器不能执行其他网站的脚本  

   

   

   

。它是由浏览器的同源策略造成的




   




   




   



，是浏览器对JavaScript实施的安全限制

     

     

     

 。

这里说明一下
 



 



 



，无法跨域是浏览器对于用户安全的考虑  




  




  




  。是浏览器的锅  


  


  


  


。

同源策略限制了一下行为： Cookie



 




 




 




、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去
     
     
     
。

前后端分离的模式下                   ，前后端的域名是不一致的 




    




    




    


，所以就会出现跨域问题
   




   




   




   。

问题

当我们开发完前端一个功能之后
















，需要运行调试                   ，通常前后端分离情况下  



     



     



     

，两套程序都运行起来之后

















，肯定会出现 协议   

   

   

 、域名    

     

     

     、端口不一致的形况吧 



 



 



 


。

那么前端调用后端接口时就会产生跨域问题                。怎么办呢？就需要代理（proxy）出场了

    




    




    




   。

跨域的解决方案

解决跨域的方案有很多    
    
    
  ，比如：jsonp




  




  




  




、cors  


  


  


、Node代理     
     
     
     、nginx反向代理

















。这里我们只讨论 proxy                 。

vue中的proxy就是利用了Node代理

     



     



     



   。

代理服务器是如何解决跨域的？

 这样就可以串通了   


     


     


     
，前端通过axios发送请求时



 




 




 




，会默认发送给本地的特性   

   

   

 ，来发送给前端配置的代理    

     

     

     ，代理根据特定规则




  




  




  




，将地址转换为后端的接口  


  


  


，并请求后端接口     
     
     
     ，这样就解决了跨域的问题了
















。那前端vue中怎样配置代理服务器呢？

proxy配置

假如我现在想请求后端的 一个接口 例如：http://www.aaabbbccc.com/login 




   




   




   



，这样我们应该怎样配置代理服务器呢？

以vue cli3.0为例：

// vue.config.js devServer: { //开启代理服务器 proxy:{ "/api": { // /api是自行设置的请求前缀
 



 



 



，按照这个来匹配请求                   ，有这个字段的请求 




    




    




    


，就会走到代理来  
    
    
    
。 target: "http://www.aaabbbccc.com", // 需要代理的域名
















，目标域名                  ，会替换掉匹配字段之前的路径 ws: false, // 是否启用websockets changeOrigin: true, //是否跨域 pathRewrite: { //重写匹配的字段  



     



     



     

，如果不需要放在请求路径上

















，可以重写为"" "^/api": "" } }, }, } //vue cli2 .0 的放在 config文件夹中的index.js 中 dev: { proxyTable:{ "/api": { target: "http://www.aaabbbccc.com", // 需要代理的域名 ws: false, // 是否启用websockets changeOrigin: true, //开启跨域 pathRewrite: { //重写请求路径上匹配到的字段    
    
    
  ，如果不需要在请求路径上   


     


     


     
，重写为"" "^/api": ""



 




 




 




， } }, }, }

以上配置中   

   

   

 ，我配置了一个 /api    

     

     

     ，只有包含这个请求的路径才会走代理




  




  




  




，例如：

http://localhost:8080/api/login //这个就可以走代理

http://localhost:8080/login //这个就不行

可以看到  


  


  


，要想所有的请求都进入代理中     
     
     
     ，就必须包含/api这个路径




   




   




   



，那么我可以对axios进行二次封装
 



 



 



，给所有的请求加这个前缀                   ，代码如下：

const requests = axios.create({ baseURL:/api, // 设置通用请求的地址前缀 timeout:10000 //请求超时的时间 }); export default requests //将requests实例 




    




    




    


，对外进行暴露

发送请求可以写为：

requests.get(/login).then((response) => {}) requests.get(/getlist).then((response) => {}) requests.get(/user/hello).then((response) => {})

此时我发送的请求就是：

http://localhost:8080/api/login

http://localhost:8080/api/getlist

http://localhost:8080/api/user/hello

通过代理的 target属性 加工之后就是 ：

http://www.aaabbbccc.com/api/login

http://www.aaabbbccc.com/api/getlist

http://www.aaabbbccc.com/api/user/hello

就是把 /api 之前的路径 修改成了 target里配置的 目标服务器的路径

     


     


     


  。

在通过 pathRewrite属性 将 /api 替换为空 为：

http://www.aaabbbccc.com/login

http://www.aaabbbccc.com/getlist

http://www.aaabbbccc.com/user/hello

这样就可以访问到后端的对应接口了 




 




 




 
。