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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
js 窗口抖动示例
Sep 04 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
Javascript创建类和对象详解
May 31 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
浅谈node的事件机制
Oct 09 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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
解析php中反射的应用
2013/06/18 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
js控制frameSet示例
2013/09/10 Javascript
js 通用订单代码
2013/12/23 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python查找第k小元素代码分享
2013/12/18 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
EJB的角色和三个对象
2015/12/31 面试题
2014年五一活动策划方案
2014/03/15 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
微信搭讪开场白
2015/05/28 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android