前端vue项目发送请求不携带cookie(vue.config.js和nginx反向代理)

一、本地环境——使用vue.config.js配置了跨域代理

本来发现问题,是因为后台记录到接收到的sessionId一直在变化,导致需要在同一个sessionId下处理的逻辑无法实现。

一开始以为是前后端分离跨域导致的,网上给出了解决方案:

main.js中加入以下:

 import axios from 'axios'
 axios.defaults.withCredentials = true

接口文件api.js中设置每次携带cookie

axios.defaults.withCredentials = true; //意思是携带cookie信息,保持session的一致性

且每次提交请求时设置:

withCredentials: true,

crossDomain: true,

export const login = (data) => {
    return axios({
        method: 'post',
        url: '/ppc_pas/user/login',
        data,
        withCredentials: true,
        c
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于前端Vue项目发送请求携带cookie的问题,您可以按照以下步骤进行排查: 1. 检查vue.config.js配置:在Vue项目中,可以通过vue.config.js文件进行一些配置。请确保在该文件中没有对cookie进行了特殊的配置,比如禁用了cookie发送。您可以检查是否有类似以下的配置项: ```javascript module.exports = { devServer: { // 是否禁用了发送cookie disableHostCheck: true, // ... }, // ... } ``` 如果存在以上配置,请将其删除或注释掉,以确保cookie能够正常发送。 2. 检查nginx反向代理配置:如果您使用了nginx进行反向代理,也需要检查nginx配置文件中的相关设置。请确保没有对cookie进行了特殊的配置,比如禁用了cookie的转发。您可以检查是否有类似以下的配置项: ```nginx location /api { # 是否禁用了cookie转发 proxy_cookie_path ~^/api/(.*)$ /$1 break; # ... } ``` 如果存在以上配置,请将其删除或注释掉,以确保cookie能够正常转发。 3. 确认接口允许跨域访问:在开发环境下,如果您的接口和前端项目部署在不同的域名下,可能会存在跨域访问的问题。请确保接口服务器允许前端项目的域名进行跨域访问,并在响应中包含Access-Control-Allow-Credentials和Access-Control-Allow-Origin头信息。您可以在接口服务器的响应头中添加以下配置: ``` Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: 前端项目的域名 ``` 请将"前端项目的域名"替换为您实际的前端项目域名。 以上是一些常见的排查步骤,希望能帮助您解决问题。如果问题仍然存在,请提供更多详细信息,我将尽力协助您解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值