当前位置:首页 » 《关于电脑》 » 正文

vue2的vue.config.js中简单配置代理跨域

20 人参与  2024年05月08日 11:45  分类 : 《关于电脑》  评论

点击全文阅读


调用后端接口访问后台数据,但是因为请求url的协议、域名、端口三者之间任意一个与当前页面url不同产生了跨域,我们vue项目运行的地址一般就是localhost 8080端口,而且后端也没有配置允许跨域(后端如果配置跨域通常是cors),所以前端就要配置跨域,Vue跨域在vue.config.js文件里配置。

代理跨域的解决方法

方法一:

后端大哥来解决,让前端存在跨域问题也可以正常访问接口

方法二:配置代理跨域

在config.js文件中的devServer属性下面的proxy属性

 devServer: {    host: 'localhost',//本地地址    port: '8080',//端口号    hot: true,//热更新自动刷新    open: true,//自动打开    overlay: {  //当出现编译错误或警告时,在浏览器中显示全屏覆盖。只显示错误信息不提示警告情况限制是      warning: false,      error: true    },    proxy: {      "/api": {        target: 'http://xxxxxxxxxxx.com',//代理地址 凡是使用/api        changeOrigin: true,//允许跨域请求        secure: false,        pathRewrite: { //重写路径 替换请求地址中的指定路径          ['^/api']: '/' //将请求地址中的api替换为空        }      }    }  }

/api的理解

‘/api’:是指遇到这个字符开头的话,在这个字符前面加上target里面的ip或者域名。

举例:
①登录接口:http://asdfgh:5000/login
…中间省略了配置过程…
②npm run serve:Local: http://localhost:8080/
③点击后发送的登录请求:http://localhost:8080/api/login
④/api 的作用就是将/api前的localhost:8080变成target的内容http://asdfgh:5000/
⑤完整的路径变成了http://asdfgh:5000/api/login
⑥实际接口当中没有这个api,所以pathwrite重写就解决这个问题的。
⑦pathwrite识别到api开头就会把/api重写成空,那就是不存在这个/apil了,完整的路径又变成:http://asdfgh:5000/login

详细可以查看webpack的官方地址:DevServer | webpack


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/105059.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1