I made a flask backend and deploy to heroku. It is working when i made a get request and made a post with postman json data. But i cant post when i use axios or fetch in react-native app.
const url = 'https://test.herokuapp.com/list/add';
const config = {
headers: { 'content-type': 'application/json' },
data: {
"test":this.state.testdata
},
};
const response = await axios.post(url, config)
.then(function(res){
console.log(res)
})
.catch(function(error) {
console.log('What happened? ' + error);
}); ```
Related
I am working on a project where I have used Laravel 9 for the backend and React for the frontend. Whenever i try to make a request it return unauthorized from the backed. But when i try this on the postman it return success response.
I am sure the problem is in my react js code.
const Submited = (e) => {
e.preventDefault();
axios
.post("http://127.0.0.1:8000/api/admin/customer/store", {
headers: {
Authorization: "Bearer" + cookies.jwt,
},
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error)
});
};
Put an space character after Bearer
I'm attempting to send a complete form to back-end server (decoupled MERN application in localhost).
The request is reaching the server, but not posting to the database.
This is seen in server console...
POST /contracts 404 1.371 ms - 19
The data to be sent in form is logging in console as an object (as intended).
This is the service function making post request from the frontend to the backend ...
const BASE_URL = `${process.env.REACT_APP_BACKEND_SERVER_URL}/contracts`
export const createContract = async (formData) => {
try {
const res = await fetch(BASE_URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
'Authorization': `Bearer ${tokenService.getToken()}`
},
body: JSON.stringify(formData)
})
return await res.json()
} catch (error) {
console.log(error)
throw error
}
}
this is the backend routes... (already set up as /contracts in server.js)
import { Router } from 'express'
import * as contractsCtrl from '../controllers/contracts.js'
const router = Router()
router.post('/', contractsCtrl.create)
router.get('/all', contractsCtrl.index)
export { router }
create controller function on the backend...
function create(req, res) {
console.log(req.body)
Contract.create(req.body)
.then(contract => res.json(contract))
.catch(err => res.json(err))
}
Any help you have would be appreciated!!
I have a problem with matching routes. I am runnning react app on port localhost:3000, and node/express server is running on port localhost:3001.
I am trying to create a club by firing this request on the frontend:
async addClub(club) {
try {
let postData = await fetch(`${this.backendUrl}/club`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({...club}),
});
this.backendUrl is correctly imported
Route on the backend file is:
router.post('/club', async (req, res) => {
try {
const body = req.body;
await new Club(body).save((err, club) => {
if (err) return console.log(err)
console.log('New club created');
res.status(200).send({ msg: 'Club created' });
});
} catch(err) {
res.status(400).json({
msg: 'Bad Request'
})
}
})
But for some reason frontend execution cannot find route specified on the backend.
I get an error: POST http://localhost:3001/club 404 (Not Found)
I have other routes through which I create other things and they work perfectly.
I am trying to use Camunda's REST api to deploy a new process. However, I keep getting this HTTP response when my function is called.
Response:
{"type":"InvalidRequestException","message":"No deployment resources contained in the form upload."}
My jsx function
async deployNewProcess(xmlData) {
const formData = new FormData()
const blob = new Blob([xmlData], {type:'application/octet-stream'})
formData.append('upload', blob)
const response = await fetch(`${baseurl}/deployment/create`, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data; boundary=<calculated when request is sent>',
'Content-Length': '<calculated when request is sent>',
'Host': '<calculated when request is sent>'
},
body: formData
})
.then(result => console.log("SUCCESS: ", result))
.catch(err => console.log("ERROR: ", err))
}
Has anyone had any experience with this?
Based on this post https://camunda.com/blog/2018/02/custom-tasklist-examples/
see the example code
here:
https://github.com/camunda-consulting/code/blob/b2c6c3892d3d8130c0951a1d3584be7969fec82a/snippets/camunda-tasklist-examples/camunda-react-app/src/middleware/api.js#L11
and here:
https://github.com/camunda-consulting/code/blob/b2c6c3892d3d8130c0951a1d3584be7969fec82a/snippets/camunda-tasklist-examples/camunda-react-app/src/actions/camunda-rest/deployment.js#L4
I have an authenticated API from that i want to fetch the data. I am doing this in REACT using Axios.. How to do this?
Something like below
const AuthString = 'Bearer '.concat(USER_TOKEN);
axios.get(URL, { headers: { Authorization: AuthString } })
.then(response => {
console.log(response.data);
})
.catch((error) => {
console.log('error ' + error);
});
1- You can create something like this if you already have access token.
const authAxios = axios.create({
baseURL: "yourURL",
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
2- After creating the axios, you can use the created axios when hitting the API:
authAxios.get("URL").then((res) => {
return res.data;