vue中proxy代理的用法(解决跨域问题)

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

vue中proxy代理的用法(解决跨域问题)

以谁未名   2022-12-09 我要评论

声明

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们