Javascript 已阻止跨源请求：同一源策略不允许读取位于的远程资源https://localhost:8000/users/login

我正在尝试向/users/signup端发送一条post消息，每次都会发生此错误。 这是我在server.js中的代码

const https = require('https');
const fs = require('fs');
var path = require('path');
const  mongoose = require('mongoose');
const express = require('express');
var cors = require('cors') //
var session = require('express-session');
var FileStore = require('session-file-store')(session); // data base for storing information about sessions.
var cookieParser = require('cookie-parser');
var logger = require('morgan'); // gia ta htpp errors, requests logger
mongoose.set('useFindAndModify', false);
mongoose.set('useUnifiedTopology',true);
const url = 'mongodb://localhost:27017/database';
mongoose.set('useNewUrlParser',true);
mongoose.set('useCreateIndex',true);
mongoose.connect(url)

.then(connection => {
  console.log('Connected to MongoDB DB')
})
.catch(error => {
console.log(error.message)
})
var app = express();
app.use(cors());
var passport = require('passport');
var authenticate = require('./authenticate');
const usersRouter = require('./routes/users');
const options = {
  key: fs.readFileSync('./key.pem','utf8'),
  cert: fs.readFileSync('./server.crt','utf8')
};

app.use(function(req, res, next) { // kolpa magkiorika poy de ta kserw
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Headers, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, PATCH, OPTIONS');
    next();
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(session({
  name: 'session-id',
  secret: '12345-67890-09876-54321', // digital sign for cookie.( Server secret key to sign the cookie)
  saveUninitialized: false,
  resave: false,
  store: new FileStore(({logFn: function(){}}))
}));
app.use(passport.initialize());
app.use(passport.session());

app.use('/users',usersRouter);

function auth (req, res, next) {
  if (!req.user) {
    var err = new Error('You are not authenticated!');
    err.status = 403;
    return next(err);
  }
  else {
        next();
  }
}
app.use(auth);
const port = 8000;
server = https.createServer(options, app).listen(port, function(){
    console.log(`Server started on port ${port}`);
});
 //error  handler 
module.exports = server;

我添加了几行代码来允许cors处理请求，但错误仍然存在。当我使用postman时，一切正常，cors头在响应头中

这就是寄存器组件

import React, { Component,useState } from 'react';
import '../css/Register.css';
import axios from 'axios';
import {withRouter} from 'react-router';
import url from '../services/url';

class Register extends Component{
    constructor(props){
        super(props);
        this.state = {
            username: "",
            password: "",
            password2: "",
            phone: "",
            email: "",
            userType: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ [event.target.name]: event.target.value })
    }

    handleSubmit = async event => {
      event.preventDefault();
        
        if(this.state.password === this.state.password2){
            try {
                const response = await fetch(`https://localhost:8000/users/signup`, {
                    method: 'POST',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: this.state.username,
                        password: this.state.password,
                        phone: this.state.phone,
                        email: this.state.email,
                        userType: this.state.userType

                    })
                })
                const jsoned = await response.json();
            } catch (error) {
                console.log(error);
                console.log('asdfasfasfa');
            }
        }else{
            alert('passwords do not match')
        }    
  };
render(){
      .... html code..
    }
export default withRouter(Register);

以及完整的错误消息

已阻止跨源请求：同一源策略不允许读取位于的远程资源https://localhost:8000/users/signup. 原因：CORS请求未成功。 TypeError:尝试获取资源时出现NetworkError

注册路线

router.post('/signup', (req, res, next) => {
  User.register(new User({username: req.body.username, email:req.body.email, phone:req.body.phone, userType:req.body.userType}), 
    req.body.password, (err, user) => {
    if(err) {
      console.log(err)
      res.statusCode = 500;
      res.setHeader('Content-Type', 'application/json');
      res.json({err: err});
    }
    else {
      passport.authenticate('local')(req, res, () => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.json({success: true, status: 'Registration Successful!'});
      });
    }
  });
});

发送post请求时的请求头

OPTIONS /users/signup HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: http://localhost:3000/
Origin: http://localhost:3000
Connection: keep-alive

---

尝试向http://而不是https://

发出请求，因此，经过几天的搜索，我发现Mozzila Firefox正在阻止自签名证书。我必须为localhost添加一个异常：

我在访问Mozilla Firefox时遇到了同样的问题。我正试图用它来寻找替代方案。我可以通过在Firefox中禁用HTTPS设置来解决这个问题

---

请注意，这个问题只发生在Firefox中，所以我在使用其他浏览器访问时没有遇到任何问题。

我刚刚在您的第二个应用程序上发布了一个类似问题的答案。应用cors标题应该是不必要的。您能否在问题中直接提供完整的cors错误？查看发送请求以获取完整信息的客户端代码也会有所帮助。鉴于完整的cors错误消息，我怀疑您的用户注册路由引发了错误。我不相信这是因为用户/登录端给了我此错误。您能在开发工具的“网络”选项卡中查看请求吗？请求方法和响应代码是什么？没有更改。谢谢你们抽出时间。