Вызов Twitch API с помощью axios и Vue

поэтому я пытаюсь использовать Twitch API, чтобы пользователи могли входить в систему с помощью Twitch API, однако у меня возникают некоторые проблемы.

image

Вот код, который у меня есть до сих пор

<template>
  <section>
    <form class="pt-6 pb-8 animated fadeIn" style="outline:none" @submit.prevent="signIn">
      <section class="mb-4">
        <label class="block text-grey-darker text-sm font-bold mb-2" for="email">
          Email
        </label>
        <input class="shadow hover:shadow-md bg-transparent appearance-none border-2 border-grey rounded w-full py-2 px-3 text-grey-darker"
          style="outline:none" type="email" v-model="email" placeholder="[email protected]">
      </section>
      <section class="mb-6">
        <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
          Password
        </label>
        <input class="shadow hover:shadow-md bg-transparent appearance-none border-2 border-grey rounded w-full py-2 px-3 text-grey-darker"
          style="outline:none" type="password" v-model="password" placeholder="********">
      </section>
      <section class="flex items-center justify-between">
        <button class="bg-grey-darker hover:bg-grey-darkest w-full text-white font-semibold py-3 px-4 border rounded-sm shadow" style="outline:none">
          Sign In
        </button>
      </section>

      <a class="flex justify-center pt-6 pb-px font-semibold text-sm text-grey hover:text-green-darker" href="#sign-up">
        Create an account
      </a>
      <a class="flex justify-center font-semibold text-sm text-grey hover:text-green-darker" href="#forgot-password">
        Forgot Password?
      </a>
    </form>

    <button class="twitch flex justify-center absolute pin-l items-center p-8 uppercase text-white font-semibold tracking-wide w-full" @click="twitch">
      <i class="fab fa-twitch pr-2 text-xl"></i> Sign in with Twitch
    </button>
  </section>
</template>


<script>
import firebase from '@/middleware/firebase'
import axios from 'axios'

export default {
  data: function () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signIn () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password),
      console.log('Signed in with ' + this.email)
    },
    twitch: function () {
      return axios.get(
        'https://id.twitch.tv/oauth2/authorize?response_type=code&client_id=<KEY>&redirect_uri=http://localhost:3000&scope=chat_login'
      ).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

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

Любая помощь приветствуется!


person Community    schedule 21.06.2018    source источник


Ответы (1)


Ваша проблема связана с CORS (см. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Вы пытаетесь получить доступ к ресурсу из домена в другой домен, что возможно только в том случае, если это явно разрешено.

person Nelo_j    schedule 21.06.2018