1. 程式人生 > >使用axios解決‘Access-Control-Allow-Origin’跨域

使用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)

修改之後再重新啟動後端伺服器進行登入,完成功能