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

_ivan 發布于2019-06-28 13:40 / 2527人閱讀

摘要：使用和解決中調用網易云接口跨域的問題新建項目新建項目新建項目然后具體設置如下項目名稱項目描述作者回車即可注意這里要安裝和然后和都選擇即可安裝項目依賴安裝模塊安裝模塊運行項目效果圖如下修改頁面內容我們先修改一下頁面內容調用網易

使用vue-axios和vue-resource解決vue中調用網易云接口跨域的問題 1. 新建vue項目 1.1 新建項目

新建項目

vue init webpack axios_resource

然后具體設置如下

項目名稱,項目描述,作者,Runtime + Compiler 回車即可

注意這里要安裝vue-router和ESLint

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

1.2 安裝項目依賴

cnpm install

1.3 安裝axios模塊

cnpm install axios --save

1.4 安裝resource模塊

cnpm install vue-resource --save

1.5 運行項目

cnpm run dev

效果圖如下

1.6 修改頁面內容

我們先修改一下頁面內容 srccomponentsHello.vue

效果圖如下

2. 使用axios 2.1 我們先修改一下頁面,讓頁面加載一些動態內容

模板修改如下

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代理

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 完整代碼如下

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

再打開控制臺，發現沒有報錯,請求的數據也是我們想要的

再次修改一下模板

我們再增加圖片數據

修改好的模板如下

完整代碼如下

最后效果圖如下

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: *

完整代碼如下 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服務器也別忘記啟用了哦。

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

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

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

GPU云服務器云服務器 vue-resource vue中調用js vue 中使用 webrtc vue中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/25792.html

解決vue-axios和vue-resource跨域問題

摘要：個人博客同步文章最近在學習，在中沒有，而是利用和進行數據通信。問題在使用的請求時出現跨域問題。這個非常重要，困惑了自己好久設置代理解決跨域問題后注釋掉解決跨域問題同一樣設置代理方法，不過不需要特別聲明中的內容了。個人博客同步文章 https://mr-houzi.com/2018/02/... 最近在學習vue，在vue中沒有ajax，而是利用vue-resource和vue-ax...

nanfeiyan 2019-08-22 14:52 評論0 收藏0
關于vue-resource在dev環境下跨域問題的解決方法

摘要：跨域問題相信跨域問題是每個前端在請求中都會遇到的問題因為瀏覽器的同源策略的限制所以是不支持跨域的當然當后臺在沒有完成搭建的時候這時候我們需要使用到模擬數據的時候這時候很多的就會出現跨域問題在中當然這個問題也不例外如下所以在此我也就整理出了跨域問題相信跨域問題是每個前端在ajax請求中都會遇到的問題,因為瀏覽器的同源策略的限制,所以ajax是不支持跨域的,當然當后臺在沒有完成搭建的...

timger 2019-08-20 17:49 評論0 收藏0
Vue 實現網易云音樂 WebApp

摘要：基于等開發一款移動端音樂，界面參考了安卓版的網易云音樂布局適配常見移動端。圖標使用阿里巴巴圖標庫，中間的唱片旋轉動畫使用了實現。搜索功能實現功能搜索歌手歌單歌曲熱門搜索數據節流上拉刷新保存搜索記錄。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI ...

Karuru 2019-08-22 17:16 評論0 收藏0
Vue.js學習

摘要：一基礎學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關于這一點我們將在后續反應系統中討論。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。其實和Jquery一樣...

TIGERB 2019-08-21 14:15 評論0 收藏0

發表評論

登陸后可評論

0條評論

_ivan

男|高級講師

我要關注我要私信

TA的文章

一個初學編程的草根大叔用了一個月時間沖上周榜第二名！給想沖榜的后浪們談談小經驗——

閱讀 3358·2021-10-13 09:40
NameCheap:21 周年慶活動, 域名注冊/轉入/續費 21% 優惠

閱讀 2596·2021-10-08 10:17
青云互聯：美國cera國慶節特價,洛杉磯機房;2核4G/30M,26元/月起,可選Windows

閱讀 3999·2021-09-28 09:45
一些提升效率的Chrome插件（持續更新）

閱讀 932·2021-09-28 09:35
回懟文章《為什么甲骨文被裁員工不值得同情》

閱讀 1816·2019-08-30 10:51
面向對象簡介

閱讀 2906·2019-08-26 12:11
紅寶書筆記-第3章-基本概念

閱讀 1652·2019-08-26 10:41
前端跨域經驗

閱讀 3100·2019-08-23 17:10

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

相關文章

**解決vue-axios和vue-resource跨域問題**

**關于vue-resource在dev環境下跨域問題的解決方法**

Vue 實現網易云音樂 WebApp

Vue.js學習

發表評論

0條評論

_ivan

男|高級講師

TA的文章

一個初學編程的草根大叔用了一個月時間沖上周榜第二名！給想沖榜的后浪們談談小經驗——

NameCheap:21 周年慶活動, 域名注冊/轉入/續費 21% 優惠

青云互聯：美國cera國慶節特價,洛杉磯機房;2核4G/30M,26元/月起,可選Windows

一些提升效率的Chrome插件（持續更新）

回懟文章《為什么甲骨文被裁員工不值得同情》

面向對象簡介

紅寶書筆記-第3章-基本概念

前端跨域經驗

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！