Я пытаюсь получить данные из API, который я сделал с помощью nodejs / fastifyjs. Я могу получить данные из API без ошибок, но когда я пытаюсь опубликовать запрос, я получаю сообщение об ошибке в консоли браузера кодировки символов, хотя я указал метатег charset. Когда я отправляю почтовый запрос от почтальона, я получаю правильный ответ и данные сохраняются. Вот код внешнего интерфейса, который я использую ...
Также, когда я пытаюсь отправить данные от почтальона, я выбираю опцию x-www-urlformencoded, потому что когда я использую опцию form-data, я получаю код ошибки "405".
Код документа html5 ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue App</title>
</head>
<body>
<div id="app">
{{msg}}
<button v-on:click="getData">Get Data</button>
<div v-for="detail in details">
<br>
<span>Name : {{detail.name}}</span><br>
<span>Age : {{detail.age}}</span><br>
<span>Image : {{detail.imageUrl}}</span><br>
</div>
<br>
<br>
<br>
<div class="sendDataToServer">
<form method="post">
<span>Enter Name: <input type="text" v-model="name"></span><br>
<span>Enter Age: <input type="number" v-model="age"></span><br>
<span>Enter Image url: <input type="text" v-model="imageUrl"></span><br>
<button v-on:click="sendData">Save data</button>
</form>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>Screenshot from 2019-03-17 16-11-42
Код Vue, который я использую для получения и публикации данных с помощью axios ...
const app = new Vue({
el:'#app',
data:{
msg: 'VueJS!',
details: [],
name:'',
age: 0,
imageUrl:'',
},
methods:{
getData: function () {
axios.get('http://localhost:3000/getData')
.then((result) => {
this.details = result.data
})
.catch((err) => {
console.log(err)
})
},
sendData: function(){
let config = {'Content-Type': 'application/x-www-form-urlencoded'}
axios.post('http"localhost:3000/saveData',{
name: this.name,
age: this.age,
imageUrl: this.imageUrl,
}, config)
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err)
})
},
}
})
Код API здесь ...
const fastify = require('fastify')({
logger:{
prettyPrint: true
}
});
// Requiring the model
const dbSch = require('./models')
// Requiring Cors
fastify.register(require('fastify-cors'))
// Requiring to get data from incoming request body
fastify.register(require('fastify-formbody'))
// ******
// Defining ROUTES
// ******
fastify.get('/', (request, reply)=>{
reply.send('Hello Fastify')
})
fastify.get('/getData', (request, reply) => {
dbSch.find({}).exec(function(err, result){
if (err) throw err
// let resultObj = JSON.parse(result)
reply.send(result)
})
})
fastify.post('/saveData', (request, reply) => {
let saveDataTodb = new dbSch({
name: request.body.name,
age: request.body.age,
imageUrl: request.body.imageUrl,
})
saveDataTodb.save(function(err, result){
if (err) {
throw err
} else {
console.log('saved !!!')
// reply.header('Content-Type', 'text/json')
reply.send('Saved to DB')
}
})
})
const port = process.env.PORT || 3000
fastify.listen(port)