山东大学项目实训（六）——后端对接遗留问题(关键)-优快云博客

本文链接：https://blog.youkuaiyun.com/Devillllived/article/details/118602083

本文探讨了解决跨域问题的方法，通过调整前后端交互策略实现登录状态的有效管理。作者详细介绍了如何从前端捕获并传递登录产生的session，确保在不同接口间保持登录状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽然标题写的是六，但其实这一周每天都有花费一段时间解决这个问题，这个问题主要就是后端的接口是一个整体，如果我要调用其他功能接口就必须要在他的服务器里登录也就是调用登录接口，但是我在浏览器里请求登录接口，且成功得到登录数据后，后端服务器并不能记录登录状态，调用其他接口返回500错误（未登录后端设置为500）

const login=()=>{
        fetchdata(loginparam).then((res)=>{
          console.log(res)
          fetchallpdata().then((res)=>{
            console.log(res)
          })
        })
      }
      login()

在这里插入图片描述
而这在Postman里模拟确是成功的，所以一开始这对我来说就是一个不知道原因的问题。经过长时间的查阅资料，终于查到有可能是跨域问题，浏览器没有将cookie在请求时发送给服务器，导致服务器不能识别，于是我在request中添加了允许cookie发送

const service = axios.create({
    url:"http://106.14.19.174",
    xhrFields: {
        withCredentials: true
    },
})

但是它报了错：Access to XMLHttpRequest at ‘…’ from origin ‘…’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute，也就是被服务器拦截了，在等待后端修改后，我再次尝试，可是它还是没能成功发送cookie
在这里插入图片描述
之后我经过长时间的尝试，想要从登录时服务器返回的数据中提取cookie并将他在访问其他功能接口时带上
之后我经过长时间的尝试，想要从登录时服务器返回的数据中提取cookie并将他在访问其他功能接口时带上，但是并不如愿，最后得知服务器传回的cookie应该会由浏览器自动保存并发送。然后经过长时间的查阅资料以及与后端的讨论，得到结论：这是个跨站问题。
最后，后端换了种方式，将cookie中的session放在数据中的一部分返回给我，我提取出来并把它当作参数发给其他功能接口，成功提取到其他功能的数据。

const param0=reactive({
        SESSION:''
      })
const login=()=>{
        fetchdata(loginparam).then((res)=>{
          console.log(res)
          param0.SESSION=res.data[1].session
          fetchallpdata(param0).then((res)=>{
            console.log(res)
          })
        })
 
   }

在这里插入图片描述