Как правильно включить предварительный запрос CORS для узла express .Router?

Question

Это мои файлы проекта: приложение. js:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var usersRouter = require('./routes/usersRouter');
var imagesRouter = require('./routes/imagesRouter');
const uploadRouter = require('./routes/uploadRouter');

const Images = require('./models/images');




//const uploadRouter = require('./routes/uploadRouter');
//const favoriteRouter = require('./routes/favoriteRouter')
var config = require('./config');

const mongoose = require('mongoose');
//mongoose.set('useCreateIndex', true);
mongoose.Promise = require('bluebird');

var passport = require('passport');
var authenticate = require('./authenticate');

// Connection URL
const url = config.mongoUrl;
const connect = mongoose.connect(url, {
    //useMongoClient: true,
    /* other options */
     useNewUrlParser: true ,
     useUnifiedTopology: true 
  });

connect.then((db) => {
    console.log("Connected correctly to server");
}, (err) => { console.log(err); });

var app = express();

// Secure traffic only
app.all('*', (req, res, next) => {
  if (req.secure) {
    return next();
  }
  else {
    res.redirect(307, 'https://' + req.hostname + ':' + app.get('secPort') + req.url);
  }
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));



app.use(passport.initialize());

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


app.use(express.static(path.join(__dirname, 'public')));

app.use('/images',imagesRouter);
app.use('/imageUpload',uploadRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

cors. js:

const express = require('express');
const cors = require('cors');
const app = express();

const whitelist = ['http://localhost:3000', 'https://localhost:3443', 'http://localhost:4200'];
var corsOptionsDelegate = (req, callback) => {
    var corsOptions;
    console.log(req.header('Origin'));
    if(whitelist.indexOf(req.header('Origin')) !== -1) {
        corsOptions = { origin: true };
    }
    else {
        corsOptions = { origin: false };
    }
    callback(null, corsOptions);
};

exports.cors = cors();
exports.corsWithOptions = cors(corsOptionsDelegate);

imagesRouter. js:

const express = require('express');
const bodyParser = require('body-parser');

const Images = require('../models/images');
var authenticate = require('../authenticate');

const imagesRouter = express.Router();
const cors = require('./cors');

imagesRouter.use(bodyParser.json());

//imagesRouter.options('*', cors.corsWithOptions, (req, res) => { res.sendStatus(200); } );


imagesRouter.route('/')
.options(cors.corsWithOptions, (req, res) => { res.sendStatus(200); })
.get(cors.cors, (req,res,next) => {
    Images.find({})
    .then((images) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'application/json');
        res.json(images);

    }, (err) => next(err))
    .catch((err) => next(err));
})

module.exports = imagesRouter;

images.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Image } from '../shared/image';
import { HttpClient } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg-service.service';


@Injectable({
  providedIn: 'root'
})
export class ImagesService {

  constructor(private http: HttpClient,
    private processHTTPMsgService: ProcessHTTPMsgService) { }

  getImages(): Observable<Image[]> {
    return this.http.get<Image[]>(baseURL + 'images')
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }

}

baseurl.ts:

export const baseURL = 'https://localhost:4200/';

Но когда я пытаюсь получить доступ к https://localhost:3443/home URL из моего браузера, я получаю эти сообщения об ошибках:

Access to XMLHttpRequest at 'https://localhost:3443/images' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:3443/images:1 Failed to load resource: net::ERR_FAILED
home:1 Access to XMLHttpRequest at 'https://localhost:3443/images' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:3443/images:1 Failed to load resource: net::ERR_FAILED

В чем проблема и как ее исправить? Я также должен упомянуть, что я пытался добавить прокси в свою программу, но это не сработало, и я решил исправить параметры / заголовки cors, возможно ли это?

Answer 1

CORS полностью управляется серверной частью, здесь я применяю промежуточное ПО cors ко всем конечным точкам приложения express:

const express = require("express");
const cors = require("cors");

const expressApp = express();
expressApp.use(cors());

const myRouter = express.Router();
myRouter.get('/' => (request, response) => {response.send('All is fine!')})
express.use(myRouter);