最近一个项目犯了一个特别二的问题,卡了一会才解决,当时在调试登录接口的时候,怎么都发不出去axios请求,chrome的network里面无论如何都没有axios发起的登录请求:
// login.vue
<template>
<div class="login">
<div class="container">
<a href="/#/index">![](/imgs/login-logo.png)</a>
</div>
<div class="wrapper">
<div class="container">
<div class="login-form">
<h3>
<span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
</h3>
<div class="input">
<input type="text" placeholder="请输入帐号" v-model="username">
</div>
<div class="input">
<input type="password" placeholder="请输入密码" v-model="password">
</div>
<div class="btn-box">
<a href="javascript:;" class="btn" @click="login">登录</a>
</div>
<div class="tips">
<div class="sms" @click="register">手机短信登录/注册</div>
<div class="reg">立即注册<span>|</span>忘记密码?</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
username: '',
password: '',
userId: ''
}
},
methods: {
login () {
const { username, password } = this
this.axios.post('/user/login', {
username,
password
}).then((res) => {
this.$cookie.set('userId', res.id, { expires: '1M' })
this.$router.push('/index')
})
},
main.js里面是这样配置的:
import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueLazyLoad from 'vue-lazyload'
import VueCookie from 'vue-cookie'
import App from './App.vue'
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 8000
// mock开关
const mock = true
if (mock) {
require('./mock/api')
}
axios.interceptors.response.use(function (response) {
const res = response.data
if (res.status === 0) {
return res.data
} else if (res.status === 10) {
window.location.href = '#/login/'
} else {
console.log('error')
return Promise.reject(res)
}
})
Vue.use(VueAxios, axios)
Vue.use(VueCookie)
Vue.use(VueLazyLoad, {
loading: '/imgs/loading-svg/loading-bars.svg'
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
vue.config.js里面做了代理:
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: {
'/api': {
target: 'http://mall-pre.springboot.cn',
changeOrigin: true,
pathRewrite: {
'/api': ''
}
}
}
}
}
后台登录的接口是user/login
我在浏览器里面运行,点击登录,然后随便输入用户名密码就直接跳转到首页了,并且network里面没有发出登录的axios请求
使用postman测试接口,一切正常:
随便输个密码返回登陆失败:
比如我如果把这里的/user/login
修改为/user/login1(并没有这个接口),就能发出axios请求:
说明接口没问题,axios也没问题,后来发现原来是在main.js里开启了mock,把mock开关改为false就可以了:
因为mock会返回模拟的数据,发送的是一个js脚本,而不会发送请求:
import Mock from 'mockjs'
Mock.mock('/api/user/login', {
"status": 0,
"data": {
"id|10000-30000": 12,
"username": "@cname",
"email": "admin@51purse.com",
"phone": null,
"role": 0,
"createTime": 1479048325000,
"updateTime": 1479048325000
}
})