0

I am new to Vue.js and I am trying to build a simple iTunes search application in Vue.js. I am trying to call the api with the code below but I am having a CORS problem: 

Access to fetch at 'https://itunes.apple.com/search?term=drake' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The component code so far is:

<template>
  <div class="jumbotron">
    <h1 class="display-4">{{title}}</h1>
    <p class="lead">{{intro}}</p>
    <hr class="my-4">
    <form class="col-6 mr-auto ml-auto">
      <input class="form-control form-control-lg mb-3" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-success btn-lg btn-block mb-3" type="submit" id="SearchBtn">Search</button>
      <!--<router-link class="btn btn-primary btn-lg btn-block" to="/next">Next</router-link>-->
    </form>
  </div>
</template>


<script>
export default {
  name: "Hero",
  props: {
    navLink: String
  },
  data: function() {
    return {
      title: "Simple Search",
      intro:
        "This is a simple hero unit, a simple jumbotron-style.",
      subintro:
        "It uses utility classes for typography and spacing to space content out."
    };
  },
  mounted: function() {
    fetch('https://itunes.apple.com/search?term=drake')
    .then(response => response.json())
    .then(data => {
      this.artist = data;
      console.log(data);
    })
  }
};
</script>

<style>
.jumbotron {
  margin-bottom: 0rem !important;
}
</style>

Any idea's?

Sole
  • 3,100
  • 14
  • 58
  • 112
  • Did you happen to read any of the questions that come up when [searching on the error text](https://stackoverflow.com/search?q=No+%27Access-Control-Allow-Origin%27+header+is+present)? – Heretic Monkey Jun 13 '19 at 15:42
  • https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/ indicates there's a `callback` parameter you can use for [JSONP requests](https://en.wikipedia.org/wiki/JSONP). – ceejayoz Jun 13 '19 at 15:43
  • or - try exactly what the error message tells you to try: _**If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.**_ - may or may not work - but at least try. – Randy Casburn Jun 13 '19 at 15:45
  • @RandyCasburn That won't work at all. It's only useful if you don't care about the response data. OP **needs** the response data. – ceejayoz Jun 13 '19 at 16:59
  • This question has got a good solution: https://stackoverflow.com/questions/45483759/cannot-load-deezer-api-resources-from-localhost-with-the-fetch-api – Sole Jun 13 '19 at 17:12

0 Answers0