向節點服務器發布請求未命中端點

Question

我正在嘗試將axios.post從我的反應前端發送到我的節點服務器！ react客戶端和節點服務器都在本地運行-在同一父目錄中。 客戶端在端口3000和服務器3400上運行。

當我將代碼更改為app.get並訪問url localhost：3400 / refundCalc時，它工作並在重新發送時顯示問候消息。 它不能作為app.post使用，但也不能通過axios post使用！

錯誤代碼為：無法加載http：// localhost：3400 / refundCalc ：對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源' http：// localhost：3000 '。

我發布了所有的React前端代碼，但實際上只是axios.post所在的getRefundCalc函數，這就是問題所在，我認為呢？

我的服務器代碼：

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')

})

我的反應前端：

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

Answer 1

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}!`))