在学习一位vue大牛的课程《VUE2.0移动端音乐App开发》时，由于vue的版本原因遇到了一些问题

这是其中之一，花费了很多的时间去解决

虽然搞定了这个问题，但是很多东西理解也不是很到位，下面详细说：

系统windows，vue版本2.9.1

项目结构如下：

这里就知道版本差异了，我没有dev-server这个文件，按照黄大牛的配置会报404的错误，错误具体我就不贴了

直接上解决办法

首先在config目录下配置index.js文件如下

然后在webpack.dev.conf中配置如下

当然，想调用数据需要在响应的逻辑中进行配置，在recommend.js中写以下

在recommend.vue进行引入即可，然后console.log在控制台查看

上面的问题解决上，我犯了个低级错误，在recommend.js中的getDiscList后面没有加s导致一直获取失败，发布谨记！！！

基于vue移动音乐webapp跨域请求失败的问题解决的更多相关文章

  1. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  2. Vue三步完成跨域请求

    三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...

  3. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  4. vue 使用axios 出现跨域请求的两种解决方法

    最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案. 1:服务器端设置跨域 header(“Access-Control-Allow-Origin:*”); h ...

  5. js 跨域请求失败

    注:错误返回:Failed to load http://xxxxxxxxxxx: No 'Access-Control-Allow-Origin' header is present on the ...

  6. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  7. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  8. Ajax跨域请求 同源策略与Jsonp

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  9. NGINX: 配置跨域请求

    说明: 内容全部来自 SegmentFault Developer Nginx 配置跨域请求 跨域请求失败, nginx 报错: 403 No 'Access-Control-Allow-Origin ...

随机推荐

  1. redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: 断开的管道 (Write failed)

    昨晚,包发到测试环境中,出现redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: 断开的 ...

  2. Bugku-CTF之输入密码查看flag

    Day14 输入密码查看flag http://123.206.87.240:8002/baopo/    

  3. UnicodeMath编码教程

    目录 1. 简介 2. 编码简单数学表达式 2.1 分数 2.2 上标和下标 2.3 空白(空格)字符使用 3. 编码其他数学公式 3.1 open/close分隔符 关于大括号方程组(cases) ...

  4. Mac cnpm安装失败及解决方案

    首先安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 淘宝镜像安装cnpm, 在终端输入: npm install -g cnpm --registry=h ...

  5. 补充一下 sizeof

    sizeof是一个运算符,给出某个类型或变量在内存中所占据的字节数 sizeof(int) //告诉你int占据几个字节 sizeof(i) //告诉你i这个变量占据几个字节 注:sizeof是静态运 ...

  6. Monent.js：强大的日期处理类库

    一.介绍及安装 1.1 介绍 Moment.js是一个优秀的JavaScript 日期处理类库. 如果没有Moment.js之类的日期处理库,我们如果需要获得格式化后的日期.往往需要通过new Dat ...

  7. [原][OSG]OSG例子程序简介

    1.example_osganimate一)演示了路径动画的使用(AnimationPath.AnimationPathCallback),路径动画回调可以作用在Camera.CameraView.M ...

  8. java笔记 -- java数据类型与类型转换

    Java是一种强类型语言, 这就意味着必须为每一个变量声明一种类型. Java中一共有8中基本类型: 4种整型: 整型: 用于表示没有小数部分的数值, 允许为负数 类型 存储需求 取值范围 int: ...

  9. 封装axios在vue-cli项目中便捷使用

    首先创建一个vue-cli搭建起来的vue项目这个不用多说了. 安装axios,使用npm install axios --save命令安装依赖,这时候项目的package.json文件中的" ...

  10. JxBrowser之三：常用函数setNetworkDelegate

    1.常用函数setNetworkDelegate,包含对网络传输数据状态的多种监控回调. 2.着重说一下其中的几个函数 BrowserContext browserContext = BrowserC ...