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>
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: *');