我正在尝试将 axios.post 从我的 React 前端发送到我的 Node 服务器! React 客户端和 Node 服务器都在本地运行 - 在同一父目录中。客户端在端口 3000 和服务器 3400 上运行。
当我将代码更改为 app.get 并访问 url localhost:3400/refundCalc 时,它会工作并在 res.send 时显示 hello 消息。它不能作为 app.post 工作,但也不能使用 axios post 工作!
错误代码为:加载失败http://localhost:3400/refundCalc :对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:3000 ' 因此不允许访问。
我发布了所有的 React 前端代码,但实际上它只是 getRefundCalc 函数,我认为 axios.post 就是问题所在?
我的服务器代码:
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')
})
我的 react 前端:
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>
);
}
}
我的预期结果是发布请求到达我的端点并控制台结果: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}!`))
关于javascript - 向 Node 服务器发出请求未到达端点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53142536/