flask + vue2 中的session跨域问题以及localhost和192.168.x.xxx的关系

最新推荐文章于 2024-05-02 11:15:00 发布

heiziheizi1307

最新推荐文章于 2024-05-02 11:15:00 发布

阅读量562

点赞数 1

分类专栏： Flask+Vue2 文章标签： python vue flask

本文链接：https://blog.csdn.net/heiziheizi1307/article/details/126965402

版权

Flask+Vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在写一个前后端分离的项目，涉及到flask后端以及Vue2的前端，中间用到了axios发送端口请求。在刚开始测试的时候发现登录时保存的session在登陆成功后便自动消失了，再次获取时显示session值为None。网上看了许多论坛，发现应该是跨域问题，于是flask端配置了一下跨域：

from flask_cors import CORS
from flask.sessions import SecureCookieSessionInterface
app = Flask(__name__)
CORS(app, supports_credentials=True)  # 解决跨域问题
app.config['SECRET_KEY'] = '********' # session的密钥
# where `app` is your Flask Application name.
session_cookie = SecureCookieSessionInterface().get_signing_serializer(app)

并在Vue项目中的vue.config.js中也设置好了代理（以下为vue.config.js中的全部代码）：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      '/api': {
        // 服务器地址为localhost:5600 或者 http://127.0.0.1:5600
        target: 'http://127.0.0.1:5600/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    host: '0.0.0.0',
    // https:true,
    port: 6103,
    client: {
      webSocketURL: 'ws://0.0.0.0:6103/ws',
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  },

  transpileDependencies: true
})

main.js中也配置好的axios的地址：

// 地址为localhost:6103或者192.168.1.100:6103
axios.defaults.baseURL = 'http://192.168.1.100:6103/api/'
axios.defaults.withCredentials = true;  //允许使用cookie

之后在测试中便顺利的服务器与前端通过192.168.1.100这个联网ip地址访问到了session

中间遇到的问题：

两处代码中统一使用localhost后，前端只能通过localhost的地址访问才能成功获取session，而只要是本机以外的设备，在同一网络中访问都会获取不到session值，改为192.168.1.100后则可以通过192.168.1.100地址在同一网络下不同设备中正常访问session。

根据同源策略，192.168.1与localhost是不同源的，所以登录时保存的信息的session的sessionId与后一个请求的sessionId不一致，导致无法获取之前保存的信息。

解决方法：都使用127.0.0.1或localhost即可