使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

摘要：使用和解决中调用网易云接口跨域的问题新建项目新建项目新建项目然后具体设置如下项目名称项目描述作者回车即可注意这里要安装和然后和都选择即可安装项目依赖安装模块安装模块运行项目效果图如下修改页面内容我们先修改一下页面内容调用网易

新建项目

vue init webpack axios_resource

然后具体设置如下

项目名称,项目描述,作者,Runtime + Compiler 回车即可

注意这里要安装vue-router和ESLint

然后Setup unit tests with Karma + Mocha?和Setup e2e tests with Nightwatch?都选择n即可

cnpm install

cnpm install axios --save

cnpm install vue-resource --save

cnpm run dev

效果图如下

我们先修改一下页面内容 srccomponentsHello.vue

效果图如下

模板修改如下

js部分修改如下

_

然后保存

发现页面有一个报错
http://eslint.org/docs/rules/no-undef "axios" is not defined

axios没有定义,是因为我们没有导入axios模块的原因

我们在js部分顶部导入一下axios模块

import axios from "axios"

加载axios模块之后错误提示消失了。
打开调试页面console界面
发现有一个报错

No "Access-Control-Allow-Origin" header is present on the requested resource.Origin "http://localhost:8080" is therefore not allowed access.

这里的not allowed access就是提示我们浏览器不支持跨域请求，搜索了很多资料，网易云不支持跨域请求的(网易云的服务器在返回你的请求中没有Access-Control-Allow-Origin这个head字段)。

那怎么办呢?
那我们只能使用代理了。

下面将介绍3种代理方式：1，远程代理 2，php代理 3，node代理

就是利用别人写好的代理接口，代理发送你的请求，这样就不会跨域了。

首先我们定义一个常量API_PROXY

const API_PROXY = "https://bird.ioliu.cn/v1/?url="

然后在axios请求里面拼接一下字符串

axios.get(API_PROXY + "http://music.163.com/api/playlist/detail?id=19723756")

js 完整代码如下

打开浏览器console界面

Object {data: Object, status: 200, statusText: "OK", headers: Object, config: Object…}config: Objectdata: Objectheaders: Objectrequest: XMLHttpRequeststatus: 200statusText: "OK"__proto__: Object

请求成功

赋值给musics

this.musics = res.data.result.tracks

发现页面有个报错

Uncaught (in promise) TypeError: Cannot set property "musics" of undefined

musics没有定义
因为这里，this的指向不是当前的vue实例
那我们在使用axios之前重新，定义一下this

var _this = this

在axios使用_this就好了

mounted部分代码

  mounted: function () {
    var _this = this
    axios.get(API_PROXY + "http://music.163.com/api/playlist/detail?id=19723756")
    .then(function (res) {
      _this.musics = res.data.result.tracks
      console.log(_this.musics)
    }, function (error) {
      console.log(error)
    })
  }

再打开控制台，发现没有报错,请求的数据也是我们想要的

再次修改一下模板

我们再增加图片数据

修改好的模板如下

完整代码如下

最后效果图如下

_

这里演示vue-resource的写法 + php curl 完成代理请求

前面我们安装了vue-resource模块，我们要在main.js加载一下vue-resource模块

加载

import VueResource from "vue-resource"

使用

Vue.use(VueResource)

为了避免和之前页面混淆，我们重新新增一个curl页面，路由同样新增加一条"/curl"的路由

index.js 完整代码如下

import Vue from "vue"
import Router from "vue-router"
import Hello from "@/components/Hello"
import Curl from "@/components/Curl"
import VueResource from "vue-resource"

Vue.use(Router)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/curl",
      name: "Curl",
      component: Curl
    }
  ]
})

其实vue-resourceget方法基本上和axios很像，基本上没有太多变动

  mounted: function () {
    this.$http.get("http://localhost/curl.php", {}, {
      headers: {

      },
      emulateJSON: true
    }).then(function (res) {
      this.musics = res.data.result.tracks
      console.log(this.musics)
    }, function (error) {
      console.log(error)
    })
  }

headers get方法里面不用填写参数，如果是post方式发送请求
则要设置Access-Control-Allow-Origin: *

完整代码如下 srccomponentsCurl.vue

当然了，最重要的是curl.php这个部分代码怎么写了
curl.php 完整代码

";
// print_r(json_decode($data));
echo $data;
//检查是否有错误  
if(curl_errno($curl)) {  
    exit("Curl error: " . curl_error($curl));  
}  

curl_close($curl);         //关闭会话 

curl请求的话就解释了，大家可以去看手册
最重要的是设置头文件允许跨域

header("Access-Control-Allow-Origin: *");

如果没有设置这个的话，代理也是没有意思的，不然前端还是会提示跨域

当然啦，你要把curl.php这个文件丢在你apache或者nginx根目录，同时apache或者nginx服务器也别忘记启用了哦。

同样的我们新建一个Node.vue的模板和/node的路由

    {
      path: "/node",
      name: "Node",
      component: Node
    }

index.js 完整代码

import Vue from "vue"
import Router from "vue-router"
import Hello from "@/components/Hello"
import Curl from "@/components/Curl"
import Node from "@/components/Node"
import VueResource from "vue-resource"

Vue.use(Router)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/curl",
      name: "Curl",
      component: Curl
    },
    {
      path: "/node",
      name: "Node",
      component: Node
    }
  ]
})

设置代理

打开config/index.js
修改proxyTable: {}部分
修改为

    proxyTable: {
      "/api": {
        target: "http://music.163.com/api",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }

第一行的"/api"指的是虚拟路径
target指的是目标地址，也就是实际api的地址
pathRewrite规则重写

然后在代码页面修改一下请求地址

  mounted: function () {
    this.$http.get("/api/playlist/detail?id=19723756", {}, {
      headers: {

      },
      emulateJSON: true
    }).then(function (res) {
      this.musics = res.data.result.tracks
      console.log(this.musics)
    }, function (error) {
      console.log(error)
    })
  }

/api/playlist/detail?id=19723756上面的这个地址其实就等于http://localhost:8080/api+/playlist/detail?id=19723756

注意这里一定要重启一下node，因为你修改了node的配置一定要重启才能生效

在命令符窗口ctrl + c
然后重新执行cnpm run dev
这时候，命令窗口会提示

[HPM] Proxy created: /api  ->  http://music.163.com/api
[HPM] Proxy rewrite rule created: "^/api" ~> ""
> Starting dev server...

说明代理成功

然后访问http://localhost:8080/#/node

就能看到效果了
完整代码 srccomponentsNode.vue

github地址 https://github.com/pandoraxm/...
原文链接 https://www.bear777.com/blog/...
个人博客 https://www.bear777.com