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

資訊專欄INFORMATION COLUMN

使用vue-axios和vue-resource解決vue中調(diào)用網(wǎng)易云接口跨域的問題

_ivan / 2521人閱讀

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

使用vue-axios和vue-resource解決vue中調(diào)用網(wǎng)易云接口跨域的問題 1. 新建vue項(xiàng)目 1.1 新建項(xiàng)目

新建項(xiàng)目

vue init webpack axios_resource

然后具體設(shè)置如下

項(xiàng)目名稱,項(xiàng)目描述,作者,Runtime + Compiler 回車即可

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

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

1.2 安裝項(xiàng)目依賴

cnpm install

1.3 安裝axios模塊

cnpm install axios --save

1.4 安裝resource模塊

cnpm install vue-resource --save

1.5 運(yùn)行項(xiàng)目

cnpm run dev

效果圖如下

1.6 修改頁面內(nèi)容

我們先修改一下頁面內(nèi)容 srccomponentsHello.vue



效果圖如下

2. 使用axios 2.1 我們先修改一下頁面,讓頁面加載一些動(dòng)態(tài)內(nèi)容

模板修改如下

js部分修改如下

_

然后保存

發(fā)現(xiàn)頁面有一個(gè)報(bào)錯(cuò)
http://eslint.org/docs/rules/no-undef "axios" is not defined

axios沒有定義,是因?yàn)槲覀儧]有導(dǎo)入axios模塊的原因

我們?cè)趈s部分頂部導(dǎo)入一下axios模塊

import axios from "axios"

加載axios模塊之后錯(cuò)誤提示消失了。
打開調(diào)試頁面console界面
發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)

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

這里的not allowed access就是提示我們?yōu)g覽器不支持跨域請(qǐng)求,搜索了很多資料,網(wǎng)易云不支持跨域請(qǐng)求的(網(wǎng)易云的服務(wù)器在返回你的請(qǐng)求中沒有Access-Control-Allow-Origin這個(gè)head字段)。

那怎么辦呢?
那我們只能使用代理了。

下面將介紹3種代理方式:1,遠(yuǎn)程代理 2,php代理 3,node代理

3 代理 3.1 遠(yuǎn)程代理

就是利用別人寫好的代理接口,代理發(fā)送你的請(qǐng)求,這樣就不會(huì)跨域了。

首先我們定義一個(gè)常量API_PROXY

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

然后在axios請(qǐng)求里面拼接一下字符串

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

請(qǐng)求成功

賦值給musics

this.musics = res.data.result.tracks

發(fā)現(xiàn)頁面有個(gè)報(bào)錯(cuò)

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

musics沒有定義
因?yàn)檫@里,this的指向不是當(dāng)前的vue實(shí)例
那我們?cè)谑褂?b>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)
    })
  }

再打開控制臺(tái),發(fā)現(xiàn)沒有報(bào)錯(cuò),請(qǐng)求的數(shù)據(jù)也是我們想要的

再次修改一下模板

我們?cè)僭黾訄D片數(shù)據(jù)

修改好的模板如下

完整代碼如下



最后效果圖如下


_

3.2 php用curl代理

這里演示vue-resource的寫法 + php curl 完成代理請(qǐng)求

前面我們安裝了vue-resource模塊,我們要在main.js加載一下vue-resource模塊

加載

import VueResource from "vue-resource"

使用

Vue.use(VueResource)

為了避免和之前頁面混淆,我們重新新增一個(gè)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
    }
  ]
})

其實(shí)vue-resourceget方法基本上和axios很像,基本上沒有太多變動(dòng)

  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方法里面不用填寫參數(shù),如果是post方式發(fā)送請(qǐng)求
則要設(shè)置Access-Control-Allow-Origin: *

完整代碼如下 srccomponentsCurl.vue



當(dāng)然了,最重要的是curl.php這個(gè)部分代碼怎么寫了
curl.php 完整代碼

";
// print_r(json_decode($data));
echo $data;
//檢查是否有錯(cuò)誤  
if(curl_errno($curl)) {  
    exit("Curl error: " . curl_error($curl));  
}  

curl_close($curl);         //關(guān)閉會(huì)話 

curl請(qǐng)求的話就解釋了,大家可以去看手冊(cè)
最重要的是設(shè)置頭文件允許跨域

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

如果沒有設(shè)置這個(gè)的話,代理也是沒有意思的,不然前端還是會(huì)提示跨域

當(dāng)然啦,你要把curl.php這個(gè)文件丟在你apache或者nginx根目錄,同時(shí)apache或者nginx服務(wù)器也別忘記啟用了哦。

3.3 nodejs代理

同樣的我們新建一個(gè)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
    }
  ]
})

設(shè)置代理

打開config/index.js
修改proxyTable: {}部分
修改為

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

第一行的"/api"指的是虛擬路徑
target指的是目標(biāo)地址,也就是實(shí)際api的地址
pathRewrite規(guī)則重寫

然后在代碼頁面修改一下請(qǐng)求地址

  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上面的這個(gè)地址其實(shí)就等于http://localhost:8080/api+/playlist/detail?id=19723756

注意這里一定要重啟一下node,因?yàn)槟阈薷牧薾ode的配置一定要重啟才能生效

在命令符窗口ctrl + c
然后重新執(zhí)行cnpm run dev
這時(shí)候,命令窗口會(huì)提示

[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/...
個(gè)人博客 https://www.bear777.com

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/25792.html

相關(guān)文章

  • 解決vue-axiosvue-resource跨域問題

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

    nanfeiyan 評(píng)論0 收藏0
  • 關(guān)于vue-resource在dev環(huán)境下跨域問題解決方法

    摘要:跨域問題相信跨域問題是每個(gè)前端在請(qǐng)求中都會(huì)遇到的問題因?yàn)闉g覽器的同源策略的限制所以是不支持跨域的當(dāng)然當(dāng)后臺(tái)在沒有完成搭建的時(shí)候這時(shí)候我們需要使用到模擬數(shù)據(jù)的時(shí)候這時(shí)候很多的就會(huì)出現(xiàn)跨域問題在中當(dāng)然這個(gè)問題也不例外如下所以在此我也就整理出了 跨域問題 相信跨域問題是每個(gè)前端在ajax請(qǐng)求中都會(huì)遇到的問題,因?yàn)闉g覽器的同源策略的限制,所以ajax是不支持跨域的,當(dāng)然當(dāng)后臺(tái)在沒有完成搭建的...

    timger 評(píng)論0 收藏0
  • Vue 實(shí)現(xiàn)網(wǎng)易音樂 WebApp

    摘要:基于等開發(fā)一款移動(dòng)端音樂,界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動(dòng)端。圖標(biāo)使用阿里巴巴圖標(biāo)庫,中間的唱片旋轉(zhuǎn)動(dòng)畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動(dòng)端音樂 WebApp,UI ...

    Karuru 評(píng)論0 收藏0
  • Vue.js學(xué)習(xí)

    摘要:一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式,還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過向下傳遞數(shù)據(jù)給子組件,子組件通過給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象,及原型屬性會(huì)被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng),具有簡單、靈活的 API。 其實(shí)和Jquery一樣...

    TIGERB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<