Vue项目中跨域问题解决方案


Posted in Javascript onJune 05, 2018

方法

  • 后台更改header
  • 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
  • Jquery jsonp

后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

打开config/index.js,在proxyTable中添写如下代码:

proxyTable: { 
 '/api': { 
  target: '填写请求源地址', //源地址 
  changeOrigin: true, //是否跨域
  pathRewrite: { 
   '^/api': '' //路径重写 
   } 
 } 
}

使用axios

this.$axios.post("/api/地址",{
   发送的数据
  }).then(data=>{
   console.log(data);
  })

axios的配置(main.js)

axios.defaults.headers.post["Content-type"]="application/json";
Vue.prototype.$axios=axios;

使用ES6fetch请求

fetch("/api/test/testToken.php",{
   method:"post",
   headers:{
    "Content-type":"application/json",
   },
   body:JSON.stringify({发送数据})
  }).then(result=>{
   return result.json()
  }).then(data=>{
   console.log(data);
  })

使用jquery jsonp

methods: { 
 getData () { 
  var self = this 
  $.ajax({ 
   url: '地址', 
   type: 'GET', 
   dataType: 'JSONP', 
   success: function (res) { 
    self.data = res.data.slice(0, 3)
    self.opencode = res.data[0].opencode.split(',') 
   } 
  }) 
 } 
}

总结

以上所述是小编给大家介绍的Vue项目中跨域问题解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
Vue多系统切换实现方案
Jun 05 #Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 #Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 #Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
js如何找出字符串中的最长回文串
Jun 04 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
domReady的实现案例
2016/11/23 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
原生js实现日历效果
2020/03/02 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
浅析python的Lambda表达式
2019/02/27 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python callable内置函数原理解析
2020/03/05 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
杭州-DOTNET笔试题集
2013/09/25 面试题
Python文件操作的面试题
2013/06/22 面试题
企业演讲稿范文
2013/12/28 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
一年级小学生评语
2014/04/22 职场文书
初中生期末评语大全
2014/04/24 职场文书
计算机求职信
2014/07/02 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
物业接待员岗位职责
2015/04/15 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
培根随笔读书笔记
2015/07/01 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android