Vue项目设置反向代理和cookie设置问题

た入场券 2022-11-21 09:25 294阅读 0赞

# 项目场景： #

最近使用Vue开发一个新的项目，因为服务器还没到，调取后端本地接口，因为请求接口的时候没有跨域，就没开反向代理。后面就被一个很基础的东西踩了坑，就是 `cookie`的一些知识，记录一下，加深一下印象。

--------------------

# 问题描述： #

联调过程中，发现调用登录接口之后，再去调其他接口，就会报登录状态失效，之前做了好久小程序的项目，突然遇到这种有点懵逼。

--------------------

# 原因分析： #

首先，出现这个问题，问了下后端，后端说是Cookie没有传给他。然后我们来确认下Cookie的定义和作用是什么？  
HTTP 协议中的 Cookie 它包括 Web Cookie 和浏览器 Cookie，它是服务器发送到 Web 浏览器的一小块数据。服务器发送到浏览器的 Cookie，浏览器会进行存储，并与下一个请求一起发送到服务器。通常，它用于判断两个请求是否来自于同一个浏览器，例如用户保持登录状态。  
当接收到客户端发出的 HTTP 请求时，服务器可以发送带有响应的 Set-Cookie 标头，Cookie 通常由浏览器存储，然后将 Cookie 与 HTTP 标头一同向服务器发出请求。  
看到这里，我就去看了下，当我调用登录接口成功的时候，后端是返回了Set-Cookie 的，但是发现浏览器没有去设置。看到这里，就知道Set-Cookie 浏览器没有生效。Cookie 基于安全方面的考虑，在浏览器中无法获取跨域的 Cookie 。

--------------------

# 解决方案： #

在Vue项目里根目录vue.config.js设置一下反向代理

module.exports = { 
     devServer: { 
      // 设置代理
      proxy: { 
       "/api": { 
        target: "http://127.0.0.1:8081/", // 域名
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
        				   //这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRequiresRewrite: { 
         "^/api": "/"
        }
       }
      }
     }
    }

请求的时候

// '/api'等于'http://127.0.0.1:8081/api'
    // 此时请求地址为'http://127.0.0.1:8081/api/picture?method=upload'
    get('/api/picture?method=upload')

解决完成！开心。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！