使用vue-axios和vue-resource解決vue中調用網易雲接口跨域的問題

時間  2019-11-07
標籤 使用 vue axios resource 解決 調用 網易 接口 問題 简体版
原文   原文鏈接

使用vue-axios和vue-resource解決vue中調用網易雲接口跨域的問題

1. 新建vue項目

1.1 新建項目

新建項目javascript

vue init webpack axios_resourcephp

而後具體設置以下html

設置

項目名稱,項目描述,做者,Runtime + Compiler 回車便可前端

注意這裏要安裝vue-router和ESLintvue

而後Setup unit tests with Karma + Mocha?和Setup e2e tests with Nightwatch?都選擇n便可java

1.2 安裝項目依賴

cnpm installnode

依賴

1.3 安裝axios模塊

cnpm install axios --savewebpack

1.4 安裝resource模塊

cnpm install vue-resource --saveios

1.5 運行項目

cnpm run devnginx

效果圖以下

效果圖

1.6 修改頁面內容

咱們先修改一下頁面內容 src\components\Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊'
    }
  }
}
</script>

效果圖以下

效果圖2

2. 使用axios

2.1 咱們先修改一下頁面,讓頁面加載一些動態內容

模板修改以下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
    <li>
        {{ music.name }}
    </li>
    </ul>
  </div>
</template>

js部分修改以下

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊',
      musics: []
    }
  },
  mounted: function () {
    axios.get('http://music.163.com/api/playlist/detail?id=19723756')
    .then(function (res) {
      console.log(res)
    }, function (error) {
      console.log(error)
    })
  }

}
</script>

_

而後保存

發現頁面有一個報錯
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代理

3 代理

3.1 遠程代理

就是利用別人寫好的代理接口，代理髮送你的請求，這樣就不會跨域了。

首先咱們定義一個常量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 完整代碼以下

<script>
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
import axios from 'axios'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊',
      musics: []
    }
  },
  mounted: function () {
    axios.get(API_PROXY + 'http://music.163.com/api/playlist/detail?id=19723756')
    .then(function (res) {
      console.log(res)
    }, function (error) {
      console.log(error)
    })
  }
}
</script>

打開瀏覽器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)
    })
  }

再打開控制檯，發現沒有報錯,請求的數據也是咱們想要的
請求成功1

再次修改一下模板

咱們再增長圖片數據

修改好的模板以下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
      <li>
        {{ music.name }}
      </li><br>
      <li>
        <img :src="music.album.picUrl" style="width:200px;">
      </li>
    </ul>
  </div>
</template>

完整代碼以下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
      <li>
        {{ music.name }}
      </li><br>
      <li>
        <img :src="music.album.picUrl" style="width:200px;">
      </li>
    </ul>
  </div>
</template>

<script>
const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
import axios from 'axios'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊',
      musics: []
    }
  },
  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)
    })
  }
}
</script>

最後效果圖以下

最後效果圖
_

3.2 php用curl代理

這裏演示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: *

完整代碼以下 src\components\Curl.vue

<template>
  <div class="curl">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
      <li>
        {{ music.name }}
      </li><br>
      <li>
        <img :src="music.album.picUrl" style="width:200px;">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'curl',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊',
      musics: []
    }
  },
  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)
    })
  }
}
</script>

固然了，最重要的是curl.php這個部分代碼怎麼寫了
curl.php 完整代碼

<?php
// header('Content-type:text/html;Charset=utf-8'); 
header('Content-Type:text/json;charset=utf-8');//設置返回文件的類型
header('Access-Control-Allow-Origin: *');//設置容許全部跨域
$id = '19723756';       //id   
$va_url = 'http://music.163.com/api/playlist/detail?';            //驗證的 url 連接地址
$post_fields = "id={$id}"; //post提交信息串  
$curl = curl_init(); //初始化一個cURL會話，必有  
//curl_setopt()函數用於設置 curl 的參數，其功能很是強大，具體看手冊  
curl_setopt($curl, CURLOPT_URL, $va_url);      //設置驗證登錄的 url 連接  
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); //設置結果保存在變量中，仍是輸出，默認爲0（輸出）  
curl_setopt($curl, CURLOPT_POST, 1);           //模擬post提交  
curl_setopt($curl, CURLOPT_POSTFIELDS, $post_fields); //設置post串
//避免https請求報錯 Curl error: SSL certificate problem: unable to get local issuer certificate
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);

$data = curl_exec($curl);  //執行此cURL會話，必有  
// echo "<pre>";
// 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服務器也別忘記啓用了哦。

請求成功2

3.3 nodejs代理

一樣的咱們新建一個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

請求成功3

就能看到效果了
完整代碼 src\components\Node.vue

<template>
  <div class="curl">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
      <li>
        {{ music.name }}
      </li><br>
      <li>
        <img :src="music.album.picUrl" style="width:200px;">
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'curl',
  data () {
    return {
      msg: 'vue調用網易雲接口',
      author: '泥猴啊',
      musics: []
    }
  },
  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)
    })
  }
}
</script>

github地址 https://github.com/pandoraxm/...
原文連接 https://www.bear777.com/blog/...
我的博客 https://www.bear777.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程