我正在运行一个NodeJS服务器，该服务器使用构建的Angular / dist文件夹为UI服务 .
在UI中我包含了swagger-ui，它正在加载一个swagger.json，* .json正在描述一个REST接口，并且在swagger-ui中你应该能够测试REST接口 .
https://swagger.io/swagger-ui/
项目结构
在server.js中，我在存储index.html的/ dist路径中添加了一个固定的路由，还有到我的服务器提供的其余接口的快速路由 . 加载swagger.json文档文件
server.js
// Get dependencies
const dotEnv = require('dotenv').config();
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var mongoose = require('mongoose');
const cors = require('cors');
// Get our API routes
const api = require('./server/routes/api');
const swaggerAPI = require('./server/routes/swaggerAPI');
const app = express();
var connectionUrl = typeof process.env.CONNECTION_URL !== 'undefined' ? process.env.CONNECTION_URL : 'mongodb://db:27017/docdb';
console.log("Connection URL: " + connectionUrl);
mongoose.connect(connectionUrl);
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
app.use('/swagger-api', swaggerAPI);
app.use('/client', express.static('client'));
app.use(cors());
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
if ('OPTIONS' === req.method) {
res.status(204).send();
}
else {
next();
}
});
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3000';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
app.listen(port, () => console.log(`API running on localhost:${port}`));
Everthing工作正常我可以使用我的REST接口加载swagger.json，将它们保存在MongoDB中并在Angular UI中显示它们 . 但是，当我想从swagger-ui测试REST接口时，我在控制台中收到错误：
Failed to load http://localhost:8888/****/Y7CTQW5PTSEG1MMPN: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
但是当我在Chrome中调试请求时，我可以在“网络”选项卡中看到加载的数据 .
为什么控制台显示cors错误，同时加载数据而不是在ui中显示？
1 回答
当站点A尝试从站点B获取内容时，站点B可以发送一个Access-Control-Allow-Origin响应头来告诉浏览器该页面的内容可以访问某些来源 . （原点是域，加上方案和端口号 . ）默认情况下，站点B的页面不能被任何其他来源访问;使用Access-Control-Allow-Origin Headers 为特定请求源的跨域访问打开了一扇门 .
对于站点B希望对站点A可访问的每个资源/页面，站点B应使用响应头为其页面提供服务：
Access-Control-Allow-Origin：http://siteA.com现代浏览器不会直接阻止跨域请求 . 如果站点A从站点B请求页面，则浏览器将实际在网络级别上获取所请求的页面，并检查响应头是否将站点A列为允许的请求者域 . 如果站点B未指示允许站点A访问此页面，则浏览器将触发XMLHttpRequest的错误事件并拒绝响应请求的JavaScript代码的响应数据 .
假设站点A想要发送/ somePage的PUT请求，使用非简单的Content-Type值application / json，浏览器将首先发送预检请求：
请注意，浏览器会自动添加Access-Control-Request-Method和Access-Control-Request-Headers;你不需要添加它们 . 此OPTIONS预检获得成功的响应标头：
发送实际请求时（在预检完成后），行为与处理简单请求的方式相同 . 换句话说，其预检成功的非简单请求被视为与简单请求相同（即，服务器仍必须再次发送Access-Control-Allow-Origin以用于实际响应） .
浏览器发送实际请求：
{“myRequestContent”：“JSON太棒了”}服务器发回一个Access-Control-Allow-Origin，就像它对一个简单的请求一样：
Access-Control-Allow-Origin：http://siteA.com有关非简单请求的更多信息，请参阅了解CORS上的XMLHttpRequest . 请检查此链接以解决并解决您的问题 .
Cors content tutorial
Using cors
fixing cors