在 NodeJS 中启用 CORS

Question

我在下面有这段代码，它是我的节点服务器中的 app.js，目前我的网站在使用 HTML2Canvas 下载画布时存在一些 CORS 问题。但我不确定为什么即使在添加 CORS 标头后它仍然无法正常工作，我在下面的代码中做错了什么吗？任何帮助将不胜感激，谢谢。

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

const app = express();

app.options('/home', cors()) 

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

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

app.get('/', function(req, res){
    res.render('index');
})
app.get('/home', function(req, res){
    res.render('home');
})

app.listen(3000, function(){
    console.log('Server started on port 3000...');
});

Answer 1

您可以安装expressjs/cors 并简单地像这样编写您的服务器：

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

const app = express();

app.use(cors());

它会为您添加所需的标题。

CORS 飞行前

如果您已经添加了标头，但不知何故仍然无法正常工作，也许您应该启用CORS preflight。

进一步了解 CORS Pre-flight here。

Answer 2

从源“http://localhost:3000”访问“//link”处的图像已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:3000' 因此不允许访问。

您已向后配置 CORS。

您正在尝试从 //link 加载图像（显然不是真正的 URL，但我假设您已对其进行了混淆），但您已在 http://localhost:3000 上配置了 CORS。

CORS 权限必须由您从中加载数据的服务器授予。

您不能授予自己的代码读取其他服务器愿意与浏览器所有者共享的数据的权限。

否则，运行 evil-hacker.example.com 的 Malery 可以使用 CORS 授予她的 JS 权限，以读取从 gmail.com 发送到访问者浏览器的数据。那将是一个巨大的安全问题！