引入axios
回到vue脚手架工程,输入命令
npm i axios
在src/axios/目录下创建index.js
import Vue from 'vue'
import axios from 'axios'
axios.defaults.baseURL="http://localhost:3000"
Vue.prototype.$ajax = axios
在main.js中引入axios
import './axios'
发送Ajax请求
接下来修改login.vue,在login方法中发送ajax请求
login() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$ajax.post('/users/validate', this.user).then((res) => {
if (res.data) {
this.$store.dispatch('login', res.data).then(() => {
this.$notify({
type: 'success',
message: '欢迎你,' + res.data.name + '!',
duration: 3000
})
this.$router.replace('/')
})
} else {
this.$message({
type: 'error',
message: '用户名或密码错误',
showClose: true
})
}
}).catch((err) => {
this.$message({
type: 'error',
message: '网络错误,请重试',
showClose: true
})
})
}
else {
return false
}
})
}
解决’Access-Control-Allow-Origin’跨域问题
修改完毕后启动数据,后端服务器,进行登录,结果发现会提示网络错误
打开浏览器调试工具,发现报以下错误
Failed to load http://localhost:3000/users/validate:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8080' is therefore not allowed access.
这是因为http请求头部没有进行允许跨域导致的,打开后端服务的app.js文件,在路由配置前添加以下代码
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
next();
});
// 以下是之前的路由配置代码
app.use('/users', router)
修改之后再重新启动后端服务器进行登录,完成功能