POST request through axios - MERNStack

Question

I made a form post to MongoDB through Axios but it doesn't work. First, the express router works very well so I can add articles with postman. But my issue is with sending my article information through Axios, nothing appears at the console except an issue which is "SharedArrayBuffer usage is restricted to cross-origin isolated sites".

here is the express code

const express = require('express');
const router = express.Router();
const Articles = require('../models/articles');

// Request all articles
router.get('/', (req, res) => {
  Articles.find()
    .then(article => res.json(article))
    .catch(err => res.status(400).json(`Error: ${err}`));
});

// Request Add new article 
router.post('/add', (req, res) => {
  const newArticle = new Articles({
    title: req.body.title,
    article: req.body.article,
    author: req.body.author,
    course: req.body.course,
    link: req.body.link
  })

  newArticle
    .save()
    .then(() => res.json("the new Article posted successfully"))
    .catch(err => res.status(400).json(`Error:${err}`))
})

// Find By ID
router.get('/:id', (req, res) => {
  Articles.findById(req.params.id)
    .then(article => res.json(article))
    .catch(err => res.status(400).json(`Error:${err}`))
})

// Find By ID & Update
router.put('/update/:id', (req, res) => {
  Articles.findById(req.params.id)
    .then(article => {
      article.title = req.body.title;
      article.article = req.body.article;
      article.author = req.body.author;
      article.course = req.body.course;
      article.link = req.body.link;

      article
        .save()
        .then(() => res.json("It has been Updated"))
        .catch(err => res.status(400).json(`Error:${err}`))
    })
    .catch(err => res.status(400).json(`Error:${err}`))
})

// Find By ID and Delete
router.delete('/:id', (req, res) => {
  Articles.findByIdAndDelete(req.params.id)
    .then(() => res.json("It has been Deleted"))
    .catch(err => res.status(400).json(`Error:${err}`))
})

module.exports = router;

here is the react code

import React, { useState } from 'react'
import axios from 'axios';
import { API_URL } from '../utils/constants';

const CompilerAddArticle = () => {
  const [title, setTitle] = useState('');
  const [article, setArticle] = useState('');
  const [link, setLink] = useState('');
  // const [errorMsg, setErrorMsg] = useState('');

  const changeOnClick = e => {
    e.preventDefault();
    const articles = {
      title,
      article,
      link
    }
    axios.post('/articles/add', articles)
      .then(res => console.log(res.data))
      .catch(err => {
        console.log(err);
      });
  };

  return ( 
    <>
      <h1>Add New Post</h1>
      <form 
        onSubmit = {
          changeOnClick
        }
        encType = "multipart/form-data"
      >
        <div className = "form-group">
          <label htmlFor = "title">Title</label>
          <input 
            type = "text"
            onChange = {
              e => setTitle(e.target.value)
            }
            className = "form-control"
            placeholder = "Enter Title"
          />
        </div>
        <div className = "form-group">
          <label htmlFor = "article">Article</label>
          <textarea 
            onChange = {
              e => setArticle(e.target.value)
            }
            class = "form-control"
            rows = "3"
          ></textarea>
        </div>
        <div className = "form-group">
          <label htmlFor = "link">Link</label>
          <input 
            type = "text"
            className = "form-control"
            placeholder = "Enter link"
            onChange = {
              e => setLink(e.target.value)
            }
          />
        </div>
  
        <button 
          type = "submit"
          className = "btn btn-primary"
        >Post</button>
      </form>
    </>
  )
}

export default CompilerAddArticle

Answer 1

Have you added CORS in your node project? add CORS package, its easy You need CORS to make calls from external sources like your react project

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Add this at the top of your app.js/server.js file below the imports

Also add a CORS header in your API request header in your react project