使用 axios 和 Vue 调用 Twitch API答案

【问题标题】：Calling the Twitch API with axios and Vue使用 axios 和 Vue 调用 Twitch API
【发布时间】：2018-06-21 01:21:56
【问题描述】：

所以我尝试使用 Twitch API 让用户能够使用 Twitch API 登录，但是，我遇到了一些问题

这是我目前的代码

<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="demo@example.co.uk">
      </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>

我不确定我在这里做错了什么，目前我只想控制台记录响应然后我会从那里开始。

感谢任何帮助！

【问题讨论】：

标签： vue.js vuejs2 axios twitch nuxt.js

【解决方案1】：

您的问题与 CORS 有关（请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS）。您正在尝试将资源从一个域访问到另一个域，这只有在明确允许的情况下才有可能。

【讨论】：