vue使用request获取后端验证码提示错误。

login.js代码

export function getVerify() {
  return request({
    url: '/base/getVerify',
    method: 'get'
  })
}

index.vue代码

<script>
import { getVerify } from '@/api/login'

export default {
  name: 'login',
  data() {
    return {
      verifyImg: ''
    }
  },
  methods: {
   .......
  },
  created() {
    getVerify().then(response => {
      this.verifyImg = response
    })
  }
}
</script>

我直接访问http://a.com/base/getVerify 可以访问到后端提供的验证码
但是使用这种方法get后端验证码地址,报错(非跨域问题)

:9528/#/login:1 Uncaught (in promise) error

看了下header信息是GET没错,返回状态也是200

Request URL: http://a.com/admin/base/getVerify
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: http://localhost:9528
Connection: Keep-Alive
Content-Length: 1211
Content-Type: image/png; charset=utf-8
Date: Sun, 25 Mar 2018 09:13:12 GMT
Keep-Alive: timeout=5, max=100
Server: Apache/2.4.27 (Win64) PHP/7.1.9
X-Powered-By: PHP/7.1.9
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Host: a.com
Origin: http://localhost:9528
Referer: http://localhost:9528/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

验证码无法显示,请问是否需要修改什么?

<template>
  <div class="auth">
    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
      <div class="panfish">
        <img :src="imgurl" :class="topimg"/>
      </div>
      <div class="panel">
        <h1 class="title">Sign IN</h1>
        <div class="input-group">
          <div class="input-box">
            <el-form-item prop="username">
              <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入账号" @focus="username()" @blur="none()"></el-input>
            </el-form-item>
          </div>
          <div class="input-box">
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码" @focus="password()" @blur="none()"></el-input>
              <!--<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>-->
            </el-form-item>
          </div>
          <div class="input-box">
            <el-form-item prop="verifyCode">
              <el-input type="verifyCode" v-model="loginForm.verifyCode" auto-complete="off" placeholder="请输入验证码" class="verifyCode"></el-input>
              <img :src="verifyUrl" @click="refreshVerify()" class="verify-pos"/>
            </el-form-item>
          </div>
        </div>
        <el-button type="primary" class="btn" v-loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getVerify } from '@/api/login'
import normal from '../../assets/images/normal.png'
import greeting from '../../assets/images/greeting.png'
import blindfold from '../../assets/images/blindfold.png'

export default {
  name: 'login',
  data() {
    return {
      imgurl: normal,
      topimg: 'normal',
      loginForm: {
        username: '',
        password: '',
        verifyCode: ''
      },
      verifyUrl: '',
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
        verifyCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
      },
      verifyImg: '',
      loading: false,
      pwdType: 'password'
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    refreshVerify() {
      this.verifyUrl = ''
      this.verifyUrl = this.verifyImg + '?v=' + window.moment().unix()
    },
    username: function() {
      this.imgurl = greeting
      this.topimg = 'greeting'
    },
    password: function() {
      this.imgurl = blindfold
      this.topimg = 'blindfold'
    },
    none: function() {
      this.imgurl = normal
      this.topimg = 'normal'
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created() {
    getVerify().then(response => {
      this.verifyImg = response
    })
    this.verifyUrl = this.verifyImg
  }
}
</script>

回答:

问题分析

这是一个很好的问题。

  • created 钩子中,verifyImgthen 内赋值,但 verifyUrl 却在 then 外赋值,这会导致 verifyUrl 赋值早于 verifyImg。你可以在这两个赋值语句上分别打个断点,看下哪个先执行,然后加深一下对 promise、异步的理解。
getVerify().then(response => {
  this.verifyImg = response
})
this.verifyUrl = this.verifyImg // 这一句会早于 promise then 中的赋值语句执行
  • @厦冰 的回答下你的评论中,提到前后端分离,以及你在 dev.env.js 定义后端地址。前后端分离的一个比较便利的开发实践是使用 proxy 将请求中当前 dev server 下的相对路径代理为后端路径,你可以直接通过 Vue cliwebpack 项目模板来学习如何设置和使用 proxyVue cli webpack 项目模板文档 API Proxying During Development。如果不使用代理,即使在 dev.env.js 中定义了后端地址,你的相对路径请求仍然会发送到 dev server,这大概是 Uncaught (in promise) error(估计是一个 404 错误,因为你实际发起的请求指向了 localhost)产生的原因。
  • AJAX 请求的本质。AJAX 是发起一个请求并获取其响应,因此当你去请求 /base/getVerify 时,如果没有发生Uncaught (in promise) error,实际获取的是后端对这个请求的响应,这里是一个图片文件的内容。
  • img src 属性的取值。imgsrc 属性是一个图片地址,因此,这个属性可以设置为一个 url 路径,或者是一个 dataURL,正如 @minororange 的回答中建议的,你可以在 /base/getVerify 响应中返回一个 base64 dataURL。但这个属性不应该设置为一个图片文件的内容,即使你在这里使用了代理,如果返回的内容不是一个 dataURL,才可以直接将 src 绑定到 verifyUrl
  • 验证码的刷新。refreshVerify 组件方法本身没问题,但当一个路径是一个 图片文件内容 + queryString 的时候,错误是明显的。
  • 调试技巧。当 Uncaught (in promise) error 错误发生时,开发者工具中一定还有更为有用的信息可供参考,你需要去找到它、学会分析。

建议的解决方案

首先需要设置开发代理,具体参考 Vue cli webpack 项目模板文档。

在设置好开发代理的前提下,可以根据上面的分析来解决问题,有如下两个途径:

  1. dataURL。即 @minororange 回答中建议的方法。但需要后端配合,修改验证码请求返回的结果,相应的 refreshVerify 方法也要修改。
  2. 直接在组件数据中设置 verifyUrl 初始值为 '/base/getVerify?v=' + window.moment().unix(),不需要 created 钩子进行初始化,然后在 refreshVerify 组件方法中重设(咦?)为 this.verifyUrl = '/base/getVerify?v=' + window.moment().unix()
data() {
  return {
    // ... 
    verifyUrl: '/base/getVerify?v=' + window.moment().unix()
  },
},
methods: {
  refreshVerify() {
    this.verifyUrl = '/base/getVerify?v=' + window.moment().unix()
  },
  // ...
}

回答:

Content-Type: image/png; charset=utf-8后端返回的是个图片,前端怎么处理的,应该是用一个img标签,把img的src指向这个api吧

回答:

让后端将图片转成base64格式的src字符串 丢到img标签的src中就可以了

data:image/png;base64,xxxxxxxxxxxxxxx

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注