vue实现跨域的方法分析
更新时间：2019年05月21日 11:20:28 作者：前端那点事
这篇文章主要介绍了vue实现跨域的方法,结合实例形式分析了vue.js跨域的原理与相关实现技巧,需要的朋友可以参考下
本文实例讲述了vue实现跨域的方法。分享给大家供大家参考，具体如下：
在请求的资源上没有“访问控制允许源”标头。因此，“http://LoalHoal:8081”是不允许访问的。
出现这个报错就说明，浏览器限制了跨域，需要设置跨域
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
二、使用JQuery提供的jsonp需要vue中引入jquery，不是今天讲的重点
methods: {
getData () {
var that = this
$.ajax({
url: 'yoururl',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
that.data = res.data;
}
})
}
}
三、使用vue-cli脚手架搭建项目时候的proxyTable解决跨域
在config目录下的index.js的proxyTable配置：
第一种：
proxyTable: {
'/api': { //使用"/api"来代替"http://v.juhe.cn/toutiao/index"
target: 'http://v.juhe.cn/toutiao/index', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '' //路径重写
}
}
},
this.axios.post("/api?type=keji&key=yourkey").then(res => {
console.log("api:"+res);
this.kjnews = res.data.result.data;
});
注意：路径重写后面是空的不然请求不成功，最后配置完之后还要npm run dev重启一下
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue父子模版传值及组件传值的三种方法,需要的朋友可以参考下2017-11-11
Vue实现网页首屏加载动画及页面内请求数据加载loading效果
Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue.js入门（3）——详解组件通信 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。2016-12-12
这篇文章主要给大家介绍了关于如何解决vue3报错:找不到模块或其相应的类型声明的相关资料,这个错误提示是指在代码中引用了Vue模块,但是系统找不到该模块或者缺少相应的类型声明文件,需要的朋友可以参考下2023-07-07
在Vue 3中,前端无法直接将Word文档转换为PDF,因为Word文档的解析和PDF的生成通常需要在后端进行这篇文章主要介绍了Vue3实现word转成pdf代码的方法,需要的朋友可以参考下,2023-07-07
Vue编译器源码分析compileToFunctions作用详解
这篇文章主要为大家介绍了Vue编译器源码分析compileToFunctions作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了Vue.js的动态组件模板的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了uniapp和vue的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
这篇文章主要介绍了vue使用Canvas在画布上添加图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论