I am trying to axios.post from my react front end to my node server! the react client and node server are both running locally - within the same parent directory. Client running on port 3000 and Server 3400.
When i change the code to app.get and access the url localhost:3400/refundCalc it works and displays the hello message when its res.send. it doesnt work as app.post but it doesnt work using the axios post either!
the error code is: Failed to load http://localhost:3400/refundCalc : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access.
I posted all of the react front end code but really its just the getRefundCalc function where the axios.post is thats the problem, i think?
my server code:
const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const port = 3400;
const server = app.listen(port, () => console.log(`Example app listening on port ${port}!`))
app.use(bodyParser.urlencoded({ extended: false }))
app.get('/', (req, res) => res.send('Hello World!'))
// to send the get refundCalcRequest
app.post('/refundCalc', function (req, res) {
console.log('response from client - get refund request ' + res)
console.log('request from client - get refund request ' + req)
res.end('HELLOOOO')
})
My react front end:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import axios from 'axios'
class MediaCard extends Component {
constructor(props) {
super(props)
this.state = {
}
}
getRefundCalc(props) {
console.log('we are calling the getrefundcalc call on button click')
console.log('the props of the card, are they different for each card?' + JSON.stringify(props))
axios.post(`http://localhost:3400/refundCalc`, { props }) <-- HERES THE CALL.
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
const { classes } = this.props;
const rtnBtnClicked = this.state.rtnBtnClicked;
return (
<Card className={classes.card} onClick={() => this.getRefundCalc(this.props)}>
<CardActionArea >
<CardMedia
className={classes.media}
image={this.props.data.imageLinks.image_src}
/>
<CardContent >
<Typography gutterBottom variant="h5" component="h5" style={{ fontSize: 9 }}>
{this.props.data.items.title}
</Typography>
<Typography component="h5" style={{ fontSize: 10 }}>
Price:£ {this.props.data.items.price}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" >
{rtnBtnClicked ? 'Remove From Refund' : 'Add to Refund'}
</Button>
</CardActions>
</Card>
);
}
}
My expected result is for the post request to hit my endpoint and console the results :D
const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const corst = require('cors'); // requiring cors
const port = 3400;
app.use(cors()) // adding cors middleware to allow request from other domains
app.use(bodyParser.urlencoded({ extended: false }))
...
const server = app.listen(port, () => console.log(`Example app listening on port ${port}!`))
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.