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

Question

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>

Answer 1

问题分析

这是一个很好的问题。

• created 钩子中，verifyImg 在 then 内赋值，但 verifyUrl 却在 then 外赋值，这会导致 verifyUrl 赋值早于 verifyImg。你可以在这两个赋值语句上分别打个断点，看下哪个先执行，然后加深一下对 promise、异步的理解。

getVerify().then(response => {
  this.verifyImg = response
})
this.verifyUrl = this.verifyImg // 这一句会早于 promise then 中的赋值语句执行

• @厦冰 的回答下你的评论中，提到前后端分离，以及你在 dev.env.js 定义后端地址。前后端分离的一个比较便利的开发实践是使用 proxy 将请求中当前 dev server 下的相对路径代理为后端路径，你可以直接通过 Vue cli 的 webpack 项目模板来学习如何设置和使用 proxy：Vue 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 属性的取值。img 的 src 属性是一个图片地址，因此，这个属性可以设置为一个 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()
  },
  // ...
}

Answer 2

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

Answer 3

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

data:image/png;base64,xxxxxxxxxxxxxxx