Question

我设置了 cors 模块，但它仍然遇到这个问题，这是我在浏览器控制台中得到的： login:1 从源“http://localhost:3000”获取“http://localhost:3001/login”的访问权限已被 CORS 策略阻止：“Access-Control-Allow-Credentials”标头的值当请求的凭据模式为“包含”时，响应中的“”必须为“真”。 POST http://localhost:3001/login net::ERR_FAILED Uncaught (in promise) TypeError: Failed to fetch。这是我的前端：

    import React, {SyntheticEvent, useState} from 'react';
import {Redirect} from "react-router-dom";

const Login = (props: { setName: (name: string) => void }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [redirect, setRedirect] = useState(false);

    const submit = async (e: SyntheticEvent) => {
        e.preventDefault();

        const response = await fetch('http://localhost:3001/login', {
            method: 'POST',
            credentials: 'include',
            body: JSON.stringify({
                email,
                password
            })
        });

        const content = await response.json();

        setRedirect(true);
        props.setName(content.name);
    }

    if (redirect) {
        return <Redirect to="/"/>;
    }

    return (
        <form onSubmit={submit}>
            <h1 className="h3 mb-3 fw-normal">Please sign in</h1>
            <input type="email" className="form-control" placeholder="Email address" required
                   onChange={e => setEmail(e.target.value)}
            />

            <input type="password" className="form-control" placeholder="Password" required
                   onChange={e => setPassword(e.target.value)}
            />

            <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        </form>
    );
};

export default Login;

this is my backend:

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

mongoose.connect('mongodb://127.0.0.1:27017/passport-jwt', {
  useUnifiedTopology: true,
  useNewUrlParser: true,
  useCreateIndex: true,
})

const app = express()
app.use(cors({origin:'http://localhost:3000'}))
require('./auth/auth')


app.use(bodyParser.json())
app.use(routes)

const PORT = 3001

app.listen(PORT, function () {
  console.log(`App listening on ${PORT}`)
})

Answer 1

在 Express 文档中 here

<块引用>

credentials：配置 Access-Control-Allow-Credentials CORS 标题。设置为 true 以传递标题，否则省略。

因为您在请求中包含凭据，所以在后端，您需要添加选项“凭据”来传递标头。替换：

app.use(cors({origin:'http://localhost:3000'}))

作者：

app.use(cors({origin:'http://localhost:3000', credentials : true}));

CORS 策略阻止了从源获取的访问

1 个答案: