reactjs - 如何从反应中允许python烧瓶socketio中的cors-origin-policy
问题描述
这是我的 server.py 文件。我已经使用 socketio 从反应应用程序中调用。
async_mode = None
app = Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'nuttertools'
Session(app)
CORS(app)
cors = CORS(app, resources={r"*": {"origins": "*"}})
# socketio = SocketIO(app, manage_session=False, async_mode=async_mode)
socketio = SocketIO(app, manage_session=False, async_mode=async_mode, cors_allowed_origins='*')
@socketio.on('message', namespace='/chat')
def chat_message(message):
print("message =!! ", message)
test_message = message
print("test message ", test_message)
emit('message', {'data': test_message['data']}, broadcast=False)
if __name__ == '__main__':
socketio.run(app, host=host, port=port, debug=True)
但是当我从反应应用程序调用这个 socketio 时,我收到以下错误。
Access to XMLHttpRequest at 'http://localhost:5003/socket.io/?EIO=3&transport=polling&t=NZ4y_ZW' from origin
'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我的反应代码如下:
const serverHost = window.location.hostname;
const serverPort = 5003;
const serverUrl = `http://${serverHost}:${serverPort}/chat`;
console.log(serverUrl);
class App extends Component {
constructor(props) {
super(props);
// this.completeChange = this.completeChange.bind(this);
this.state = {
userMessage: '',
conversation: [{
text: "Please enter your mobile number",
user: 'ai',
}],
socket: io(serverUrl),
childVisible: false,
show: false,
selectedValue: undefined,
radioOptions: [],
headerControler: false,
mobileNoTaken: false
};
}
如何解决 corse 原产地政策错误?
解决方案
Cors错误可以像处理
const io = require("socket.io")(httpServer, {
origins: ["https://example.com"],
// optional, useful for custom headers
handlePreflightRequest: (req, res) => {
res.writeHead(200, {
"Access-Control-Allow-Origin": "https://example.com",
"Access-Control-Allow-Methods": "GET,POST",
"Access-Control-Allow-Headers": "my-custom-header",
"Access-Control-Allow-Credentials": true
});
res.end();
}
});
推荐阅读
- javascript - 试图在 JS 中做类似的事情
- javascript - 帖子的标签不显示,另一方面,使用 vuejs 3 和 firebase 的标题和内容
- r - 用于基于不均匀日期创建不均匀组的 R 函数
- python - 这是我的第一个 python 项目,我一直试图在屏幕上向下移动一个简单的矩形,因为俄罗斯方块块掉下来但失败了
- laravel - 如何获取集合关系中的总项目
- google-apps-script - 将 html 文件中的所有表格数据抓取到 Google 工作表中
- html - shopify 中的样式部分
- python - 通过 Kinesis firehose 将流数据传输到 S3 的代码在调用 PutRecord 操作时不断产生错误:(UnknownOperationException)
- blockchain - 了解区块链智能合约
- reactjs - 在其他页面 React 的 URL 中显示数据感谢 id