Search code examples
wordpressxmlhttprequestvue.jsaxioswp-api

Error WordPress REST API V2 call with Vue.js


I am getting the following error, when I make a call to WP REST API with Vue.js and axios.

XMLHttpRequest cannot load http://my-wordpress-site.com/wp-json/wp/v2/posts. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.

When I use Postman with GET method, it is working correctly.

Where is the problem?

var app = new Vue({
  el: '#app',
  data: {
    posts: [],
  },
  mounted: function() {
    this.getPosts()
  },
  methods: {
    getPosts: function() {
      var app = this

      axios.get('http://my-wordpress-site.com/wp-json/wp/v2/posts')
      .then(function (response) {
        app.posts = response.data.title.rendered
      })
      .catch(function (error) {
        console.log(error)
      })
    }
  }
});
<div id="app">
  <div class="section">
    <ul>
      <li v-for="post in posts">{{ post }}</li>
    </ul>
    <h3></h3>
  </div>
</div>


Solution

  • I solved it by changing a line in wp-includes/rest-api.php file,
    in rest_send_cors_headers() function:

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