我的应用程序接口托管在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);
发布于 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:端口问题已由用户修复&此答案包含问题的实际答案。
发布于 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-Type
https://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
复制相似问题