Angular应用程序无法通过Socket.IO与Flask通信

Question

我正在进行一个Angular项目，该项目涉及通过SocketIO与Flask通信。不幸的是，我是python和Flask的完全初学者，尽管我已经尝试了所有我能理解的东西。到目前为止，我已经尝试过涉及CORS，这可以在代码中看到，也可以在中提到Zachary Jacobi的解决方案

Javascript-否'；访问控制允许来源'；标头出现在请求的资源上

然而，我仍然得到错误

访问位于"的XMLHttpRequesthttp://localhost:5000/socket.io/?EIO=3&transport=轮询&t=NDLi66V"来自原点"http://localhost:4200'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。

得到http://localhost:5000/socket.io/?EIO=3&transport=轮询&t=NDLi66V净：：ERR_FAILED

我使用的Flask代码是

from flask import Flask, render_template
from flask_socketio import SocketIO
from flask_cors import CORS
from corsAlt import crossdomain
import json
app = Flask(__name__)
CORS(app)
#app.config['SECRET_KEY'] = 'vnkdjnfjknfl1232#'
socketio = SocketIO(app)
@app.route('/')
@crossdomain(origin='*')
def sessions():
return render_template('index.html')

def messageReceived(methods=['GET', 'POST']):
print('message was received!!!')
@socketio.on('my event')
def handle_my_custom_event(json, methods=['GET', 'POST']):
json["user_name"]='Asad'
json["user_input"]='My Server'
print('received my event: ' + str(json))
socketio.emit('my response', json, callback=messageReceived)

if __name__ == '__main__':
socketio.run(app, debug=True, host='localhost', port = 5000)

在角度侧，

import { Sio2service } from '../sio2.service';
@Component({
selector: 'app-workout-options',
templateUrl: 'workout-options.component.html',
styleUrls: ['../app.component.css']
})
export class WorkoutOptionsComponent implements OnDestroy{
mymessage: string;
subscription: Subscription;
@Output() public childEvent = new EventEmitter();
constructor(private messageService: MessageService, private sio2: Sio2service) {
this.subscription = this.messageService.getMessage()
.subscribe(mymessage => {
this.mymessage = mymessage;
});
}

OnInit(){
this.sio2.messages.subscribe(msg => {
})
}
FupdateParent(exerName:string) {
this.sio2.sendMsg(exerName);
}
}

其中SIO和SIO2代码为

import { Injectable } from '@angular/core';
import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
import * as Rx from 'rxjs/Rx';
import { environment } from '../environments/environment';
@Injectable({
providedIn: 'root'
})
export class Sioservice {
private socket;
constructor() { }
connect(): Rx.Subject<MessageEvent> {
// If you aren't familiar with environment variables then
// you can hard code `environment.ws_url` as `http://localhost:5000`
this.socket = io(environment.ws_url);
// We define our observable which will observe any incoming messages
// from our socket.io server.
let observable = new Observable(observer => {
this.socket.on('message', (data) => {
console.log("Received message from Websocket Server")
observer.next(data);
})
return () => {
this.socket.disconnect();
}
});
// We define our Observer which will listen to messages
// from our other components and send messages back to our
// socket server whenever the `next()` method is called.
let observer = {
next: (data: Object) => {
this.socket.emit('message', JSON.stringify(data));
},
};
// we return our Rx.Subject which is a combination
// of both an observer and observable.
return Rx.Subject.create(observer, observable);
}
}

import { Injectable } from '@angular/core';
import { Sioservice } from './sio.service';
import { Observable, Subject } from 'rxjs/Rx';
@Injectable({
providedIn: 'root'
})
export class Sio2service {
messages: Subject<any>;
// Our constructor calls our wsService connect method
constructor(private wsService: Sioservice) {
this.messages = <Subject<any>>wsService
.connect()
.map((response: any): any => {
return response;
})
}
// Our simplified interface for sending
// messages back to our socket.io server
sendMsg(msg) {
this.messages.next(msg);
}
}

请注意，Angular应用程序与作为的app.js文件通信顺畅

let app = require("express")();
let http = require("http").Server(app);
let io = require("socket.io")(http);
io.on("connection", socket => {
// Log whenever a user connects
console.log("user connected");
// Log whenever a client disconnects from our websocket server
socket.on("disconnect", function() {
console.log("user disconnected");
});
// When we receive a 'message' event from our client, print out
// the contents of that message and then echo it back to our client
// using `io.emit()`
socket.on("message", message => {
console.log("Message Received: " + message);
io.emit("message", { type: "new-message", text: message });
});
});
// Initialize our websocket server on port 5000
http.listen(5000, () => {
console.log("started on port 5000");
});

但我遇到的问题是，我无法让它与上面的app.js通信，因为它似乎创建了自己的服务器。

Answer 1

在响应头中需要三件事来解决CORS问题：

1. response.headers.add("Access-Control-Allow-Origin", "*")
2. response.headers.add('Access-Control-Allow-Headers', "*")
3. response.headers.add('Access-Control-Allow-Methods', "*")

我不知道Flask是如何工作的，但我可以猜测你只处理了第1点：crossdomain(origin='*')

旁注：第3点用于带有OPTIONS动词的飞行前请求。

为了帮助你，我从你粘贴在问题中的问题链接中复制了一部分代码：

@app.after_request
def after_request(response):
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return response