当前位置:   article > 正文

vue设置前端代理_vue前端代理

vue前端代理

在项目开发中,有时候会遇到跨域的问题,这个问题一般是后台来进行解决,不过前台也能解决,通过配置代理的方式来解决。在vue.config.js进行配置。跨域出现的原因:由于同源策略的影响,请求服务器时,如果域名、协议、端口号有一个不一样就会产生跨域的问题,前端代理的解决原理,通过vue-cli搭建一台代理服务器,然后前台请求代理服务器时,有代理服务器去请求数据,两个服务器直接没有同源策略,可以直接访问。

一、方法一

在vue.config.js中添加如下配置:

  1. devServer:{
  2. proxy:"http://localhost:5000"
  3. }

说明:

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可。

  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。

  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

二、方法二

编写vue.config.js配置具体代理规则:

  1. module.exports = {
  2. devServer: {
  3. proxy: {
  4. '/api1': {// 匹配所有以 '/api1'开头的请求路径
  5. target: 'http://localhost:5000',// 代理目标的基础路径
  6. changeOrigin: true,
  7. pathRewrite: {'^/api1': ''}
  8. },
  9. '/api2': {// 匹配所有以 '/api2'开头的请求路径
  10. target: 'http://localhost:5001',// 代理目标的基础路径
  11. changeOrigin: true,
  12. pathRewrite: {'^/api2': ''}
  13. }
  14. }
  15. }
  16. }
  17. /*
  18. changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
  19. changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
  20. changeOrigin默认值为true
  21. */

说明:

  1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。

  2. 缺点:配置略微繁琐,请求资源时必须加前缀。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/459233
推荐阅读
相关标签
  

闽ICP备14008679号