VueJs2 HTTP Get Request from JSON API

Question

I am working on retrieving data from a JSON API by VueJs 2. I can retrieve data from the URL using the following code.

My component is showGet. I am using jsonplaceholder data and it's working fine. But when I give my desired API (https://news.ontario.ca/newsroom/en.json) it does not work. This API works nicely in Postman. In my browser it's showing JSON data. But whenever I put my URL in Vue HTTP get request it does not work.

It's not even showing in console.log(data).

<script>
export default {
 data(){
 return{
 blogs:[]
 }
 },
 methods:{
 },
 created(){
 this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data){
 console.log(data);
 this.blogs= data.body.slice(0,10);
 })
 }
}
</script>

My App.vue code is below:

<script>
import showGet from './components/showGet'
export default {
 name: 'App',
 components: {
 showGet
 },
 data(){
 return{
 }
 },
 methods:{
 }
}
</script>

• CREM: Probably you need to send on the request something equivalent to withCredentials: true
• CREM: This problem is related to Cross-origin Requests

Answer 1

i dont see any issues in your code

maybe you are not including vue-resource (required to use this.$http)

new Vue({
 el: '#app',
 data() {
 return {
 blogs: []
 }
 },
 methods: {
 },
 created() {
 this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data) {
 //console.log(data);
 this.blogs = data.body.slice(0, 10);
 })
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
 <ul>
 <li v-for="blog in blogs">
 {{ blog.id }} - {{ blog.title }}
 </li>
 </ul>
</div>