快速节点中的CORS配置和socket.io No‘访问-控制-允许-原始’
我的应用程序接口托管在Heroku上，而Angular webAPP托管在其他服务器上。我有一个问题，当集成socket.io到API，我对api的调用不工作，我得到错误503，由一些错误的配置的CORS？
app.js (托管在heroku服务器上的Node.js/Express)
var express = require('express');
var app = express();
var port = process.env.PORT || 8080;
//var port = 3000;
// Notification Real Time
// http://4dev.tech/2017/12/tutorial-creating-a-realtime-notification-system-in-angular-and-nodejs/
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
io.set("origins", "*:*");
var socket_port = process.env.PORT || 8000;
server.listen(socket_port);
//server.listen(8000);
io.on('connection', function(socket) {
socket.on('create notification', function( data ) {
socket.broadcast.emit('new notification', data);
});
});
/* ... more code ...*/
app.listen(port, ()=> {
console.log('Node/Express: \x1b[32m%s\x1b[0m', 'online - port: '+ port);
});在chrome控制台中显示错误：
OPTIONS https://myapp-backend.herokuapp.com/login 503 (服务不可用)无法加载https://myapp-backend.herokuapp.com/login：对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“access - control -Allow-https://myapp-backend.herokuapp.com/login”标头。因此不允许访问源'http://my-domain.com‘。响应具有HTTP状态代码503
编辑
If set server.listen(8000); get 404错误：
GET https://myapp-backend.herokuapp.com/socket.io/?EIO=3&transport=polling&t=MEyiNar 404 (未找到)
后跟：
未能加载https://myapp-backend.herokuapp.com/socket.io/?EIO=3&transport=polling&t=MEyiNar：当请求的凭据模式为“”include“”时，响应中的“”Access-Control-Allow-Origin“”标头的值不能是通配符“”*“”。“”因此不允许访问源'http://my-domain‘。由withCredentials属性控制XMLHttpRequest发起的请求的凭据模式。
更新
它在这种配置下工作得很好，但端口出现了问题
// Notification Real Time
// http://4dev.tech/2017/12/tutorial-creating-a-realtime-notification-system-in-angular-and-nodejs/
var io = require('socket.io')(server);
// io.set("origins", "*:*");
io.on('connection', function(socket) {
socket.on('create notification', function( data ) {
socket.broadcast.emit('new notification', data);
});
});
// var socket_port = process.env.PORT || 8080;
// server.listen(socket_port);
//server.listen(8000);回答 2
Stack Overflow用户
发布于 2018-06-02 02:34:38
浏览器使用OPTIONS方法检查几个CROS。(例如允许使用哪些方法)
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// Add this
if (req.method === 'OPTIONS') {
res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, OPTIONS');
res.header('Access-Control-Max-Age', 120);
return res.status(200).json({});
}
next();
});Checkout MDN for full details of OPTIONS method.
编辑：我刚刚注意到，这是另一个错误，这个应用程序在本地使用了两个不同的端口，但在Heroku中你只会得到一个端口。
EDIT 2:端口问题已由用户修复&此答案包含问题的实际答案。
Stack Overflow用户
发布于 2018-06-02 02:15:03
任何可能对用户数据有影响的HTTP方法都将首先通过OPTIONS方法发送HTTP请求。您的跨域应该发送一个自定义头部，并且接受跨域请求的服务器应该接受该头部。
无论您的实际请求是什么，在OPTIONS请求能够成功之前都不允许提交。
例如，http://my-domain.com可以先将这些标头添加到请求中：
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-CUSTOM-HEADER, Content-Typehttps://myapp-backend.herokuapp.com/login应该有这样的使用规范：
Access-Control-Allow-Origin: http://my-domain
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-CUSTOM-HEADER, Content-Type
Access-Control-Max-Age: 86400请在此处阅读有关印前检查请求的信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
https://stackoverflow.com/questions/50648137
复制相似问题