使用axios解決‘Access-Control-Allow-Origin’跨域
引入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)
修改之後再重新啟動後端伺服器進行登入,完成功能