Использование vue-axios и vue-ресурса для решения междоменной проблемы вызова облачного интерфейса Netease в Vue

Автор оригинала: David Wong.

1. Новый проект Vue

1.1 Новый Проект

Новые проекты

vue init веб-пакет axios_resource

Тогда конкретные настройки будут следующими

Имя проекта, Описание Проекта, Автор, Среда выполнения + Компилятор Введите

Обратите внимание, что здесь установлены vue-маршрутизатор и ESLint

Затем Настройте модульные тесты с помощью Karma + Мокко? и Настройка тестов e2e с помощью Nightwatch? Выберите n.

1.2 Зависимость От Проекта Установки

установка npm

1.3 Установка axios Модульная

npm установить axios –сохранить

1.4 Модульный ресурс установки

npm установить vue-ресурс –сохранить

1.5 Текущие Проекты

npm запускает разработчика

Результаты таковы.

1.6 Изменение содержимого Страницы

Давайте сначала изменим содержимое страницы. src\компоненты\Привет.vue

Результаты таковы.

2. Используйте Axios

2.1 Давайте сначала изменим страницу, чтобы загрузить динамический контент.

Измените шаблон следующим образом

Раздел JS изменен следующим образом

Затем сохраните

Обнаружена ошибка на странице http://eslint.org/docs/rules/no-undef "аксиос" не определен

Axios не определен, потому что мы не импортировали модуль Axios

Давайте импортируем модуль Axios в верхней части раздела JS

импорт axios из “axios”

Сообщение об ошибке исчезло после загрузки модуля Axis. Откройте консольный интерфейс страницы отладки. Обнаружена ошибка.

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

Там запрещен доступ Это напоминает нам, что наш браузер не поддерживает междоменные запросы и выполняет поиск большого количества информации. Netease Cloud не поддерживает междоменные запросы (облачные серверы Netease не имеют главного поля Access-Control-Allow-Origin при возврате ваших запросов).

Тогда что мне делать? Тогда мы можем использовать только агентов.

Вот три режима прокси-сервера: 1, удаленный прокси-сервер 2, php-прокси 3, прокси-сервер узла

3 Агента

3.1 Удаленный агент

Это означает использование интерфейса агента, написанного другими, для отправки вашего запроса, чтобы он не пересекал домен.

Сначала мы определяем константу. API_PROXY

const

А затем axios Соедините строку в запросе

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

Полный код JS выглядит следующим образом

Откройте браузер консоль Интерфейс

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

Успешный запрос

Назначение музыка

this.musics = res.data.result.tracks

Обнаружена ошибка на странице.

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

Музыка не определена Потому что здесь это не указывает на текущий экземпляр Vue Поэтому мы его используем. тревожно Перед этим переопределите это

var _this = this

оставайся axios Используй _это Просто отлично

Смонтированная часть кода

  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 прокси с завитком

Вот демонстрация того, как пишется vue-ресурс + PHP curl выполняет запросы прокси

Мы установили его перед собой. vue-ресурс Модуль, мы собираемся быть в ___________ main.js Загрузите его через ресурс Модульный

Загрузка

импорт VueResource из “vue-ресурса”

Воспользуйся

Vue.использование(Ресурс Vue)

Чтобы избежать путаницы с предыдущими страницами, мы добавили новую страницу curl и новый маршрут’/curl для маршрутизации.

Полный код для индекса. 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-ресурс Метод get в основном подводит итог 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)
    })
  }

Методу get заголовков не нужно заполнять параметры, если это способ отправки запросов post Для установки Управление доступом-Разрешить-Происхождение: *

Полный код выглядит следующим образом src\компоненты\Curl.vue

Конечно, самое главное-это то, как писать завиток. PHP-код. Локон. Полный код PHP

";
// print_r(json_decode($data));
echo $data;
// Check for errors  
if(curl_errno($curl)) {  
    exit('Curl error: ' . curl_error($curl));  
}  

Curl_close($curl);//Close the session

Запрос на завиток объясняется. Вы можете перейти к руководству. Самое главное-настроить файл заголовка так, чтобы он разрешал междоменную

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

Если это не настроено, прокси-сервер не имеет смысла, иначе интерфейс все равно будет запрашивать междоменный

Конечно, тебе следует оставить керла. Файл PHP в корневом каталоге Apache или nginx, а также сервер Apache или nginx также должны быть включены.

3.3 Прокси-сервер Nodejs

Точно так же мы строим новый. Node.vue Шаблоны и /узел Маршрут

    {
      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: {
      '/api': {
        target: 'http://music.163.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

Первая строка '/api' Относится к виртуальным путям Цель относится к целевому адресу, который является адресом фактического API Перезапись правила перезаписи пути

Затем измените адрес запроса на кодовой странице

  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/плейлист/подробности?id=19723756 Приведенный выше адрес фактически эквивалентен http://localhost:8080/api + /плейлист/подробности?id=19723756

Обратите внимание, что здесь необходимо перезапустить узел, поскольку при изменении конфигурации узла он должен быть перезапущен, чтобы вступить в силу.

В окне командира ctrl + c Затем выполните повторно npm запустите dev На этом этапе в окне командной строки появится запрос

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

Объясните успех агентства

Затем посетите http://localhost:8080/#/node

Вы можете видеть эффект. Полный код src\компоненты\Узел.vue

Адрес Github https://github.com/pandoraxm/… Ссылка https://www.bear777.com/blog/… Личный блог https://www.bear777.com

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}

{{ msg }}

{{ author }}