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: *');
Related
I'm having an issue to get my component working client side with fetch (it's ok when I'm refreshing the page) in Nuxt.
The $fetchState.error doesn't load any error though. But my console.log in my mounted hook doesn't load any data.
I don't know what I'm doing wrong here. I'm using target: 'static'
<template>
<p v-if="$fetchState.pending">Fetching realisation...</p>
<p v-else-if="$fetchState.error">An error occurred :(</p>
<nuxt-link v-else :to="real.full_slug" class="real">
<div class="real__content">
<h2>{{ real.name }}</h2>
</div>
</nuxt-link>
</template>
<script>
export default {
props: {
realisation: {
type: Object,
required: true
}
},
data() {
return {
real: {}
}
},
async fetch() {
this.real = await this.$storyapi
.get(`cdn/stories/${this.realisation.work}`, {
version: 'published',
find_by: 'uuid'
})
.then((res) => {
return res.data.story
})
.catch((err) => console.log(err))
},
mounted() {
console.log(this.real)
},
fetchOnServer: true
}
</script>
I get back 500 errors if i try to send a file from Vue to my API endpoint in .net Core
I followed tutorials who do this, but they do not seem to work for this setup.
.net core API:
[Route("api/[controller]")]
[ApiController]
public class FileUploadController : ControllerBase
{
[HttpPost("[Action]")]
public string sendFiles([FromBody]FileUploadAPI file)
{
return "Yes!";
}
public class FileUploadAPI
{
public IFormFile File { get; set; }
}
}
Vue:
this.$axios.post(
'https://localhost:44352/api/fileupload/sendFiles',
event.target.files[0],
)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
I want to receive my file in the API
Request failed with status code 500
You would get a 404 error because you're using the wrong URL.
Your action name is sendFiles (plural) so the correct URL path would be /api/FileUpload/sendFiles.
Axios is capable of handling FormData correctly as a multipart/form-data request. You do not need to set headers (which were incorrect anyway), nor should you wrap the data in an object.
let data = new FormData();
data.append('file', files[0]); // assuming "files" refers to a FileList
this.$axios.post('https://localhost:44352/api/FileUpload/sendFiles', data)
.then(...)
Following example code snippet may be help for you. In it I am using vuetify, vue-upload-component and axios to upload an image.
<template lang="html">
<div class="imageUploader">
<!-- <v-card> -->
<!-- <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"></div> -->
<div class="avatar-upload">
<div class="text-center p-2">
<div class="avatar-container">
<div class="no-image" v-if="files.length === 0 && file == ''">
<v-icon>cloud_upload</v-icon>
</div>
<template v-else>
<img :src="file" alt="">
</template>
</div>
</div>
<div class="text-center p-2">
<v-btn class="browse-btn" flat>
<file-upload
extensions="gif,jpg,jpeg,png,webp"
accept="image/png,image/gif,image/jpeg,image/webp"
name="avatar"
v-model="files"
#input="uploadImage"
ref="upload">
Choose File
</file-upload>
</v-btn>
</div>
</div>
<!-- </v-card> -->
</div>
</template>
<script>
import Cropper from 'cropperjs'
import VueUploadComponent from 'vue-upload-component'
//import axios from 'axios'
export default {
components: {
'file-upload': VueUploadComponent
},
props: ['order', 'imageURL'],
data() {
return {
dialog: false,
files: [],
edit: false,
cropper: false,
file: '',
}
},
mounted() {
if (this.imageURL) {
this.file = this.$baseURL+'document/downloadimage/' + this.imageURL
}
},
watch: {
imageURL() {
if (this.imageURL) {
this.file = this.$baseURL+'document/downloadimage/' + this.imageURL
}
},
},
methods: {
**uploadImage(file) {
let formData = new FormData();
formData.append('file', file[0].file);
axios.post(axios.defaults.baseURL + 'document/uploadimage', formData, {headers: {'Content-Type': 'multipart/form-data'}})
.then((response) => {
this.dialog = false
this.$emit('upload', {id: response.data.result[0].objectId, order: this.order})
this.file = this.$baseURL+'document/downloadimage/' + response.data.result[0].objectId
let reader = new FileReader()
reader.readAsDataURL(file[0].file)
reader.onload = () => {
let base64 = reader.result.split(',')[1]
this.$emit('base64', base64)
}
this.getDimensions(this.$baseURL+'document/downloadimage/' + response.data.result[0].objectId, (result) => {
this.$emit('dimensions', {width: result.width, height: result.height})
})
})
.catch((error) => {
console.log(error)
})
},**
getDimensions(url, callback) {
var img = new Image();
img.src = url
img.onload = function() {
var result = {width: this.width, height: this.height}
callback(result)
}
}
},
}
</script>
I created a post and stored it in Cloud Firestore and now I would like to output the data in my vueJs file called Dashboard.vue.
But I do not know how it works. I tried some ideas by myself without a good end result.
So how can I output this data?
Files:
Firebase => Cloud Firestore
created post data in firebase:
and
create post method in vueJs post.vue
createPost () {
fb.postsCollection.add({
postDetails: {
createdOn: this.postDetails.createdOn,
content: this.postDetails.content,
userId: this.currentUser.uid,
image: this.postDetails.image,
comments: this.postDetails.comments,
likes: this.postDetails.likes
}
}).then(ref => {
this.post.content = ''
this.$router.push('/dashboard')
}).catch(err => {
console.log(err)
})
}
Do as follows:
Create a posts array in your data:
...
data() {
return {
posts: []
}
},
....
Then create a method that fetches the records and assigns the result to the posts array:
methods:{
getPosts: function() {
fb.postsCollection.orderBy('createdOn', 'desc').onSnapshot(querySnapshot => {
let postsArray = []
querySnapshot.forEach(doc => {
let post = doc.data()
post.id = doc.id
postsArray.push(post)
})
this.posts = postsArray;
})
}
},
.....
Call the method in the beforeMount() lifecycle hook:
beforeMount(){
this.getPosts()
},
Then render the posts out to the DOM. For example:
<div v-if="posts.length">
<div v-for="post in posts">
<h4>{{ post.createdOn }}</h4>
<p>{{ post.content}}</p>
<ul>
<li>comments {{ post.comments }}</li>
</ul>
</div>
</div>
<div v-else>
<p>There are currently no posts</p>
</div>
I was able to display WordPress post content using axios and Vue.js. Once I switched to filtering by slug, I was unable to display post content.
<template>
<div>
<article>
<h2 class="subtitle">{{ post.title.rendered }}</h2>
<div v-html="post.excerpt.rendered"></div>
</article>
</div>
</template>
<script>
import axios from "axios";
import Router from 'vue-router'
export default {
name: 'ShowPost',
data () {
return {
post: []
}
},
created() {
this.slug = this.$route.params.slug;
},
mounted() {
axios({ method: "GET", "url": "https://wpdemo.stevensoehl.com/wp-json/wp/v2/posts?slug=" + this.slug }).then(json => {
this.post = json.data;
}, error => {
console.error(error);
});
}
}
</script>
It is necessary to check whether there is cross domain problem in the console, and there may be no cross domain problem
I figured it out a solution. In my links to an individual post I carried over the slug and id as params
<router-link :to="{name: 'ShowPost', params: {slug: post.slug, id:post.id}}">{{ post.title.rendered }}</router-link>
Route is slug and filter response by id. It now works as planned.
import axios from "axios";
export default {
name: 'ShowPost',
data () {
return {
post: []
}
},
created() {
this.id = this.$route.params.id;
},
mounted() {
axios({ method: "GET", "url": "https://wpdemo.stevensoehl.com/wp-json/wp/v2/posts/" + this.id }).then(json => {
this.post = json.data;
}, error => {
console.error(error);
});
}
}
I am not sure what I am doing wrong here, still pretty noob at vue js so that might be the problem.
The problem is that it does not display anything. I got it to work with older vue version with a bit different code, but yeah...
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data: function(){
return {
posts: ''
}
},
mounted: function(){
posts = this.$http.get('/wp-json/wp/v2/posts?per_page=10');
posts.get(function(posts){
this.$set('posts', posts);
})
}
});
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: postList}
]
});
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
});
HTML is here if that makes things a bit easier to understand :
<div class="container-fluid projects" id="projects">
<h1 class="text-center project-heading">Projects</h1>
<div class="white-wrap">
<div id="app">
<router-view></router-view>
</div>
</div>
<template id="post-list-template">
<div class="container">
<div class="post-list">
<article v-for="post in posts">
<div class="post-content">
<h2>{{ post.title.rendered }}</h2>
{{ post.id }}
</div>
</article>
</div>
</div>
</template>
</div>
This resolved my problem:
var postLists = Vue.component('post-list',{
template:'#post-list-template',
data: function () {
return {
posts:'',
}
},
mounted:function () {
this.$http.get('./wp-json/wp/v2/posts').then(response => {
// get body data
this.posts = response.body;
this.posts.forEach(function (){
} );
}, response => {
console.log('Not Found');
});
}
});
//router
var router = new VueRouter({
routes: [
{ path: '', component: postLists },
]
});
new Vue({
el: '#app',
router: router,
});