vue跨域解决方法
更新时间：2017年10月15日 09:32:17 作者：王永存
这篇文章主要介绍了vue跨域解决方法 ,需要的朋友可以参考下
vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试，解决的办法有三个：
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
这样就可以跨域请求数据了。
二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）
例如请求的url:“http://f.apiplus.cn/bj11x5.json”
1、打开config/index.js,在proxyTable中添写如下代码：
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}
}
2、使用axios请求数据时直接使用“/api”：
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
总结
以上所述是小编给大家介绍的vue跨域解决方法 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
解决Vue的项目使用Element ui 走马灯无法实现的问题
这篇文章主要介绍了解决Vue的项目使用Element ui 走马灯无法实现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue实现简单瀑布流布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vuex 注入 Vue 生命周期的过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，通过引入Vue-router对象模块时配置mode属性可以启用history模式，本文将通过代码示例给大家详细分析Vue路由History模式2023-06-06
这篇文章主要介绍了vue fetch中的.then()的正确使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要为大家详细介绍了vue将后台数据时间戳转换成日期格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了在vscode中使用脚手架搭建vue项目的相关资料,包括创建Vue2和Vue3项目,并展示了如何自定义项目配置,如选择特性、路由模式、CSS预处理器和工具配置,通过代码介绍的非常详细,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了VUE组件的计算属性详解，使用计算机属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存，下文来了解具体详情2022-06-06
最新评论