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 version	Socket.IO protocol revision	Engine.IO protocol revision	Flask-SocketIO version	python-socketio version	python-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": '*'},
     
}))

 

前台運行，后台運行，打開控制台查看，終於成功