vue跨域问题百分百解决方案

通用方案

当然,以下是如何修改 Vue.js 配置文件(vue.config.js)以设置代理的教程:

1. 在 Vue.js 项目的根目录中创建或编辑 vue.config.js 文件

如果你的项目中还没有这个文件,你需要在项目的根目录下创建它。如果已经存在,你可以直接编辑。

2. 添加或修改 devServer.proxy 配置

在 vue.config.js 文件中,你需要配置 devServer.proxy 选项。这个选项应该是一个对象,它的每个属性对应一个特定的请求路径模式,和一个关于如何处理匹配这个模式的请求的配置对象。

以下是一个简单的配置示例,该示例将所有以 ‘/api’ 开头的请求代理到 ‘http://0.0.0.0:5000’:

module.exports = {
    
    
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://0.0.0.0:5000',
        changeOrigin: true,
        ws: true, // 如果你的后端支持 WebSocket,启用这个选项
      },
    },
  },
}

在这个配置中,target 选项是你的后端服务器的地址,changeOrigin 选项设置为 true 可以让代理服务器修改请求头中的 origin,使得它看起来就像请求是直接发送到后端服务器的,而不是发送到代理服务器的。如果你的后端支持 WebSocket 连接,你还需要启用 ws 选项。

如若无法解决,请看下面

我遇到的问题

问题的原因:

在 Vue.js 前端应用中,我们使用 axios 发送 HTTP 请求,而 axios 的 baseURL 被设置为了 Flask 后端服务器的地址(比如,‘http://0.0.0.0:5000’)。同时,我们也在 Vue.js 的配置文件(vue.config.js)中使用了代理(proxy)功能,将所有以 ‘/api’ 开头的请求都代理到 Flask 后端服务器。这导致了一个冲突,因为 axios 已经直接发送请求到 Flask 服务器,而这个请求无法经过 Vue 的开发服务器进行代理。

由于 Vue.js 和 Flask 服务器在不同的端口上运行,它们被浏览器视为不同的源(origin)。因此,当 axios 直接发送请求到 Flask 服务器时,由于同源策略的限制,Flask 服务器设置的 session cookie 没有正确返回到 Vue 应用。

解决方案:

我们需要移除或注释掉 axios 的 baseURL 设置。这样,axios 默认将所有请求发送到当前页面的地址,即 Vue.js 的开发服务器。然后,根据 vue.config.js 中的代理配置,以 ‘/api’ 开头的请求将被代理到 Flask 后端服务器。

代理允许你在本地创建一个虚拟服务器,将特定的请求转发到另一个服务器,这样你就可以规避浏览器的跨域策略限制。代理也可以解决开发环境中的 CORS 问题,因为它们会让你的请求看起来就像来自于本地服务器一样。

当你正确配置代理之后,Vue.js 应用和 Flask 后端服务器之间的所有请求和响应都会通过 Vue 的开发服务器,这样浏览器就会认为所有的请求都来自同一个源,从而允许你正确地接收和设置 cookies。

希望这篇文章能帮助那些在 Vue.js 和 Flask 集成开发中遇到类似问题的开发者。如果你有任何其他问题或疑问,欢迎留言交流。

猜你喜欢

转载自blog.csdn.net/m0_57236802/article/details/131017773