前端使用Vue框架解决跨域问题「建议收藏」
现在项目开发,都实现前后端分离开发,导致前端向后端发送请求,会出现跨域错误 ;如何解决这个问题?
方法一:后端可以下载cors包,对指定的前端域名允许请求;具体操作可以自行百度;
今天主要介绍的是前端人员不用去麻烦后端人员,就可以通过前端设置实现跨域请求;
方法二:前端设置服务器代理;
本人用的是脚手架vue-cli 3.x版本下的Vue框架;导致没有了vue-cli 2.x版本的build和config文件夹;
我的项目目录如下:
;
很多前端的朋友们就会纳闷,原先在vue-cli 2.x版本的config文件夹,中配置服务器代理;现在没有了config文件,我怎么配置了?
对于vue-cli 3.x版本配置服务器代理,可以在根目录下建立一个vue.config.js的文件;(一定要记住是根目录);
建好以后文件目录如下:
在vue.config.js的空文件中,自行添加如下代码:
注意如下:target对应的属性值为你准备向后端服务器发送请求的主机+端口,含义为:相当于把前端发送请求的主机+端口自动替换成挂载的主机和端口,这样前后端的主机端口都一一就不会存在跨域问题;
ws:表示WebSocket协议;changeOrigin:true;表示是否改变原域名;这个一定要选择为true;
这样发送请求的时候就不会出现跨域问题了。
若想要设置跟多服务器代理,可自行去官方文档查看:https://cli.vuejs.org/zh/config/#devserver
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/193428.html原文链接:https://javaforall.cn
相关文章
- vue怎么和后端对接_vue后端框架推荐
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- 初始VUE
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 史上最详细vue的入门基础
- 后端 学习 前端 Vue 框架基础知识
- 当面试官问我vue的 diff算法时,我会理直气壮地这么说
- Vue 自定义轮播
- vue + echarts 省份地图 以及打包后地图加载不出来(比较详细)「建议收藏」
- VUE组件封装_vue组件内部双向绑定
- Vue生成二维码_vue视频软件怎么生成二维码
- Vue生成二维码_vue通过二维码分享
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 前端三大框架之Vue-day01
- Vue.js 数据绑定的基本实现和代码分析
- VUE系列 --- 网络模块axios(三)
- Vue-CLi2配置打包环境
- 实现简易版本的MVVM框架(Vue)
- vue.js客服系统实时聊天项目开发(十六)连接websocket实时处理消息,断线重连,处理服务端关闭指令
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue常用内置指令
- vue.js入门篇之Vue.js 样式绑定
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 浅谈Vue中的Prop详解编程语言
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)