Cors issue using NodeJs, Express and React locally

Question

Im building a small application with NodeJs and Express for the backend and React for the client side.

To avoid CORS policy issues i'm using the "cors" npm package, but it's not solving my issue on the client side....

Express:

const express = require('express')
const routes = require('../routes')
const bodyParser = require('body-parser')
const cors = require('cors')

const server = express()

server.use(bodyParser.urlencoded({ extended: true }))
server.use(express.json())
server.use(cors())
server.use('/api', routes)

module.exports = server

Client side:

import React, {useState, useEffect} from 'react'
import axios from 'axios'

const Contacts = () => {
    const [contacts, setContacts] = useState([])

    useEffect(() => {
        axios.get('localhost:3300/api/contacts/')
        .then((response) => {
            console.log(response)
        })
        .catch((error) => console.log(error))
    }, [])

    return (
        <div className="container">
            <h1>Contacts list</h1>
        </div>
    )
}

export default Contacts

And i still get that on the console:

Am i missing something here?

Thank you by advance...

Answer 1

将 'http://' 放在 'localhost:3300...' 前面

Answer 2

you need to fix your server side code to allow cross domain requests

server.use(cors())
server.options('*', cors());

Answer 3

Ok finally i replace

axios.get('localhost:3300/api/contacts/')

by

axios.get('http://127.0.0.1:3300/api/contacts/')

and it work...