vue2中vue.config.js简单配置代理跨域的方法
前言
调用后端接口访问后台数据，但是因为请求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
总结
到此这篇关于vue2中vue.config.js简单配置代理跨域的文章就介绍到这了,更多相关vue.config.js配置代理跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue监听滚动条页面滚动动画的相关资料,需要的朋友可以参考下2023-06-06
小编给大家整理了关于vue移动端日期选择组件的知识点总结，希望能够给读者带来帮助，一起学习参考下。2018-02-02
文章主要介绍了在使用vite+tsc打包Vue3项目时,可能会遇到TS类型错误的问题,通过配置tsconfig.json文件,可以解决这个问题,设置"checkTypes": false可以关闭依赖包的类型检查,从而避免不必要的错误提示2026-03-03
最近学习过程中常碰到让用户登录注册这种,这篇文章主要给大家介绍了关于Vue实战记录之登陆页面实现的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了vue实现日历组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法，本文给提供多种方法,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue3中遇到reactive响应式失效的问题记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
vxe-table 实现 excel 选择一个单元格拖拽自动复制新的单元格(示例代码)
vxe-table是一款强大的表格组件,支持Excel风格的操作,通过鼠标右下角的扩展按钮,用户可以拖拽选择单元格并自动复制内容到扩展区域的所有单元格中,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要介绍了vue项目中定义全局变量、函数的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论