冷山冷杉 2019-07-16 11:00 采纳率: 0%
浏览 7338

vue中 axios.defaults.withCredentials = true 形成跨域,后端使用shiro

接手一个项目,登录部分后端使用shiro安全框架
交给我的时候axios用的webpack的proxy,但是在生产环境中使用不了proxy
所以只能老老实实写URL。

但是出现了一问题,使用proxy代理时,
登录后cookie自动被写入“shirosessionid”
贴代码

// webpack-dev-server 相关配置
    devServer: {
        open: false,
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
            "/api": {
                target: Url,
                ws: false,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ""
                }
            }
        }

然后在fetch中引用proxy的'/api'

let Url = require("../../public/projectConfig").Url
const service = axios.create({
     baseURL: process.env.NODE_ENV === 'production' ? Url : '/api',
    timeout: 10000 // 请求超时时间
});

这么写开发环境下一切正常,但是打包之后因为proxy失效,请求不能用。




后来后端告诉我 当我使用代理的时候 cookie里会有 SHIROSESSIONID
这个数据 。
但是这条数据我并没有手动保存,感觉像是proxy自动保存的




因为shiro框架需要根据cookie判断登录身份,所以就让后端把sessionid发给我我来手动保存。
然后这么写

  API.login(this.ruleForm)
        .then(res => {
          let sessionId = res.data
          setCookie("SHIROSESSIONID",sessionId)
          this.$message.success("登录成功");  
          this.$router.push("/clue");
                    })

后来发现如果需要再请求里携带cookie 需要再设置axios

axios.defaults.withCredentials = true

但是这么一写,因为第一次登录请求没有cookie,所以直接
network error 但是可以拿到请求结果,却被请求拦截器报错了

图片说明


network 如下


图片说明


后来我又把登录那的接口改了

    // 登录
    login(data) {
        return fetch({
            url: 'login',
            method: 'get',
            params: data,
            withCredentials:false // 此接口的withCredentials和其他接口不一样
        })
    },

此时其他的接口**withCredentials = true**
然后登录不报错,其他的接口能拿到数据,却依然报错。
然后进入拦截器的error
如果不设置withCredentials = true的话,那后台返回登录超时
因为没能从cookie里拿到SHIROSESSIONID

我百度了好久,好像是因为Access-Control-Allow-Origin不能用通配符*
需要指定ip地址

有几个问题求大佬们解答

  • 为什么使用proxy时一切正常,并且自动的往cookie里写入SHIROSESSIONID
  • 网上查找withCredentials = true时才可以携带cookie,如果第一次登录请求是没有cookie的 那是不是一定会报错
  • 这种情况前端该怎么做
  • 写回答

1条回答

  • 叶子兔 2019-07-17 13:30
    关注

    我觉得可以这样判断请求的接口是不是login如果不是再设置axios.defaults.withCredentials = true

    评论

报告相同问题?

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝