node.js - 如何正确启用节点 express.Router 的 CORS 预检选项请求?
问题描述
这些是我的项目文件:app.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);
图像路由器.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;
图像.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 选项/标题,这可能吗?
解决方案
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);
推荐阅读
- html - 即使遵循指南,猫头鹰旋转木马也无法安装
- java - 前台操作
- android - Firebase 远程配置崩溃 - 由 java.lang.UnsupportedOperationException 引起
- hadoop - HIVE 是否会使用分区条件而不是分区条件进行全表查询?
- python - 有没有办法从表中选择所有列,除了一列
- python - R中是否有任何类似于python中的pd.crosstab的函数?
- react-native - 刷新 Flatlist React Native
- javascript - 如何在 Angular 8 中提供字符串作为 Ngbdatepicker 的输入
- django - django - 如何同时将文件上传到本地和远程服务器目录
- c++ - 多位数拆分为单位数的数组输入(线性搜索)