zoukankan      html  css  js  c++  java
  • Vue-Socket.io跨域问题 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' Mentalflow解决思路

    前台使用Vue

    后台使用Flask

    报错

    Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=NT3ph1M' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    尝试了网上搜的各种跨域解决方法都不行

    1、前台 vue项目里新建一个vue.config.js配置文件,在其中添加下面代理配置         [ 无效 ]

    module.exports = {
        devServer: {
            proxy: {
                '/socket.io': {
                    target: 'http://127.0.0.1:5000',
                    ws: true,
                    changeOrigin: true
                },
                
            }
        }
    }

    2、前后台 index.html 插入<meta http-equiv="Access-Control-Allow-Origin" content="*">   [ 无效 ]

    3、后台 flask模块的SocketIO方法中添加形参cors_allowed_origins   [ 无效 ]

    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'secret!'
    socketio = SocketIO(app, cors_allowed_origins ="*")

    4、后台 引入CORS库     [无效]

    from flask import Flask, render_template
    from flask_socketio import SocketIO, emit
    from flask_cors import CORS  
    
    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'secret!'
    CORS(app,cors_allowed_origins="*")  
    socketio = SocketIO(app, cors_allowed_origins ="*")

    。。。

    昨天尝试了一天都没有解决,今天又是元气满满的一天,继续

     

     注意到刚打开客户端页面的时候,服务端有下面这段提示

    The client is using an unsupported version of the Socket.IO or Engine.IO protocols (further occurrences of this error will be logged with level INFO)

    我理解的是服务端和客户端的socketio版本不匹配,然后查flask-socketio官方文档。在 https://flask-socketio.readthedocs.io/en/latest/ 文档里,列出了Flask-SocketIO和JavaScript Socket.IO相对应的版本

    Version compatibility

    The Socket.IO protocol has been through a number of revisions, and some of these introduced backward incompatible changes, which means that the client and the server must use compatible versions for everything to work.

    The version compatibility chart below maps versions of this package to versions of the JavaScript reference implementation and the versions of the Socket.IO and Engine.IO protocols.

    JavaScript Socket.IO versionSocket.IO protocol revisionEngine.IO protocol revisionFlask-SocketIO versionpython-socketio versionpython-engineio version
    0.9.x 1, 2 1, 2 Not supported Not supported Not supported
    1.x and 2.x 3, 4 3 4.x 4.x 3.x
    3.x 5 4 5.x 5.x 4.x

    在cmd中查看当前后台安装的 flask_socketio 版本是 5.0.1

    >>> import flask
    >>> import flask_socketio
    >>> flask.__version__
    '1.1.2'
    >>> flask_socketio.__version__
    '5.0.1'

    前台socket.io-client版本是2.4.0,果然版本不匹配  (按照上表Flask-SocketIO 5.x 对应 JavaScript Socket.IO 3.x)

    使用命令,给前台安装指定版本的socket.io-client    npm i socket.io-client@3.1.0 

    安装完后检查版本  npm view socket.io version 

    怀着激动的心情,运行后台  flask run  ,运行前台 npm run serve 

    结果还是一样报CORS policy跨域错误...

    注意到后台仍然提示 The client is using an unsupported version of the Socket.

    难道我的版本还是不匹配?我想查Vue-Socket.io的文档,找了一会不知道入口在哪,只好仔细看看首页的例子

    官方例子里列出了两种使用VueSocketIO的模式

    Using Connection String
    Using socket.io-client Instance

    看了下我自己的代码,现在使用的是第一种

     
    import VueSocketIO from 'vue-socket.io'
    
    Vue.use(new VueSocketIO({
         debug: true,
         connection: 'http://127.0.0.1:5000',
         extraHeaders: {"Access-Control-Allow-Origin": '*'},
       
    }))

    感觉上面这种不会自动去使用socket.io-client,于是手动添加引用 socket.io-client ,改成第二种模式

    import VueSocketIO from 'vue-socket.io'
    import SocketIO from 'socket.io-client'
    
    Vue.use(new VueSocketIO({
         debug: true,
         connection: SocketIO('http://127.0.0.1:5000'),      //使用Socket.IO-client
         extraHeaders: {"Access-Control-Allow-Origin": '*'},
         
    }))

    前台运行,后台运行,打开控制台查看,终于成功

  • 相关阅读:
    关于软件工程是不是教那些不会写程序的人开发软件的一些看法。
    学习这门课的一些问题
    软件测试的平台
    课程上不明白的问题
    目前流行的源程序版本管理软件和项目管理软件都有哪些, 各有什么优缺点?
    自我介绍
    【软件工程】提问回顾与个人总结
    Google Kick Start 2019 C轮 第一题 Wiggle Walk 题解
    elasticsearch-py 解决 too_long_frame_exception 问题
    Redis集群学习笔记
  • 原文地址:https://www.cnblogs.com/code1992/p/14336803.html
Copyright © 2011-2022 走看看