在本地使用 NodeJs、Express 和 React 的 Cors 问题答案

【问题标题】：Cors issue using NodeJs, Express and React locally在本地使用 NodeJs、Express 和 React 的 Cors 问题
【发布时间】：2020-03-21 00:37:33
【问题描述】：

我正在使用 NodeJs 和 Express 为后端构建一个小型应用程序，并为客户端构建一个 React。

为了避免 CORS 政策问题，我使用了“cors”npm 包，但它并没有解决我在客户端的问题....

快递：

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

客户端：

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

我仍然在控制台上得到它：

我错过了什么吗？

提前谢谢你...

【问题讨论】：

把'http://'放在'localhost:3300...'前面
正如错误所说，您需要使用允许的方案之一，即您的 get() 调用需要在您的 url 中使用类似 http:// 的方案前缀

标签： javascript node.js reactjs express cors

【解决方案1】：

好吧，我终于换了

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

由

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

它工作......

【讨论】：

【解决方案2】：

您需要修复服务器端代码以允许跨域请求

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

【讨论】：

如果要启用所有 CORS 请求，则不需要星号，请参阅此处的第一个用法示例：npmjs.com/package/cors

【解决方案3】：

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

【讨论】：

这是正确答案。你错过了协议。 localhost 也只是 127.0.0.1 的掩码。因此，您的主机可能存在一些内部映射问题。但是这个答案应该得到赞成。