vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
vue跨域代理怎么写
解决vue $http的get和post请求跨域问题vue $http的get和post请求跨域问题首先在config/index.js中配置proxyTable
proxyTable: { '/api':{ // target:'http://jsonplaceholder.typicode.com', target:'http://localhost:9080', changeOrigin:true, pathRewrite:{ '/api':'' } }
用户名和密码登录的表单提交
methods: { // get请求 // submitForm() { // var formData=JSON.stri.jpg" alt="vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)" border="0" />
值得注意的是:
1、一定要设置 {emulateJSON: true},不然跨域不成功.
2、跨域在chrome浏览器中你看到的还是http://localhost:8080(即你启动vue的地址,而不是你服务器应用的地址),所以你看到不要惊讶,其实是跨域成功的。
3、http请求中要带上/api,经过index.js的代理会将/api去掉,浏览器中的访问地址为http://localhost:8080/api/amdatashift/login/user,然后实际的访问的地址是http://localhost:9080/amdatashift/login/user。通过代理就实现了跨域访问。
vue el-upload上传控件一直报跨域问题 post请求变成get请求最近做vue的上传,用的是elmentui的el-upload控件,结果一直出幺蛾子,希望大家少走坑。
不多说 截图上代码。
1。搬控件改action地址
配置好了后,直接测试,emmm ..... 报错 如下:
提示了跨域问题,这个能理解毕竟我是本机开发前端服务和后端服务端口不一样。
查找资料,vue跨域问题的解决方案,然后说的开启代理。
找到vue项目的config中的index.js文件打开,添加如图中的东西。 注意changeOrigin是true。这个意思用/api代替http://192.158.111.101:8000。例子:原地址'http://localhost:8000/ssmShow/upload' 现地址'/api/ssmShow/upload'。
所以上传控件改为:
测试 ;emmmm。。。又错了
还是报错跨域,而且请求了2次,而且请求有问题啊
文件上传应该还是post请求,结果这边一个get请求 一个options请求。懵逼。302的状态不会改,先去搞后面这个500的报错。
options的请求网上有他的解释和处理方法 我照着改了(方法是用过滤器截取请求,并修改) 贴代码 我的是java 后台。
添加过滤器。
同时web.xml需要添加如下
改后重启java后台,测试 emmm。。。如下:
这次厉害了 调用三次接口了 ,我去。不过好的情况是 options请求已经返回正确了,因为options请求返回正确了,所以请求了第三次。
仔细看了下第三次请求,这个是个get请求啊。附件上传怎么就是个get请求呢。
网上找了很久,大家都说的el-upload这个控件有问题。不能用action,于是按照网上方法在action里面加个假的地址,直接在控件的before-upload的钩子函数上动手脚。
直接在这里面用axios的post请求来提交文件。
继续测试
第三次上传请求还是个get请求,这就有问题了,说el-upload中的action有问题就算了 怎么直接调用post请求,会直接变成get请求呢。然后找了好久。在一个老哥的提醒下知道。
js或者vue中当有错误时候,会导致post请求变成get请求。然后我就找了我的错误那就是我的地址。
你说气不气,居然只是这个地方少了斜杠,加上后测试
一切都好了 ,请求只有一个了 post还是post了 文件也上传成功了。虽然很难过 还是很开心。
注意我图中标记的地址,这个里面端口是8080的 还有api字样,这不是我的后台真正地址,这是代理地址,他通过代理就能访问我的真实地址了 ,所以老哥们别看见端口不对 或者地址路径不对就认为不对了 这个是对的。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持开心学习网。
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue3兼容的插件多吗(关于vue3编写挂载DOM的插件问题)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue代码统计(Vue实现计数器案例)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
热门推荐
- 安装了nginx怎么启动(windows下快速安装nginx并配置开机自启动的方法)
- photoshop常用快捷键
- laravel接口请求模拟(Laravel框架控制器的request与response用法示例)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- docker容器编排入门教程(laradock环境docker-compose操作详解)
- python简易版学生管理系统(python3.6实现学生信息管理系统)
- dedecmsseo如何布局(dedecms中tags标签页伪静态化修改技巧)
- 深入理解php 变量(不常用但很实用的PHP预定义变量分析)
- python字典的值排序(python 对字典按照value进行排序的方法)
- jquery插件写法
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9