node后端與Vue前端跨域問題怎么處理

本文小編為大家詳細介紹“node后端與Vue前端跨域問題怎么處理”，內容詳細，步驟清晰，細節處理妥當，希望這篇“node后端與Vue前端跨域問題怎么處理”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

node.js后端跨域解決方案

先看后端的入口文件：

app.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors')
const expressJWT = require('express-jwt')
const app = express();
const users = require('./routes/users')
const config = require('./config')
app.use(expressJWT({secret: config.jwtSecretKey}).unless({path: [/^\/api\/users/]}))
// const db = require('./db/index')
app.use(cors())
app.use(express.urlencoded({extended: false}))
app.use(bodyParser.json())
app.get('/', (req, res) => {
    res.send('hello world !')
})
app.use('/api/users', users)
const testRouter = require('./routes/testToken')
app.use('/my', testRouter)
const profiles = require('./routes/profiles')
app.use('/api/profiles', profiles)
app.use((err, req, res, next) => {
    if (err) return res.send({status: 400, message: err})
    if(err.name === 'UnauthorizedError') return res.send({status: 404, message: '身份認證失敗'})
    res.send({status: 404, message: err})
})
app.listen(5000, () => {
    console.log('api server running at http://127.0.0.1:5000')
})

代碼不少，但重要的就下面這幾行：

const cors = require('cors')
app.use(cors())

前提條件是你得先安裝了cors，這樣寫好之后，就保證你的后端接口可以跨域訪問了。

前端vue項目

前端要發起ajax請求，可以在入口文件main.js中全局掛載axios，而后端的接口則最好寫在axios.defaults.baseURL中

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import axios from './http'
Vue.use(ElementUI);
axios.defaults.baseURL = 'http://127.0.0.1:5000/api/'
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

注意注意注意，最重要的代碼是：axios.defaults.baseURL = 'http://127.0.0.1:5000/api/'

這行代碼是前端項目能跨域的關鍵

注意import axios from './http'引入的是我自己寫的http.js

http.js

import axios from "axios";
import { Message, Loading } from 'element-ui';
let loading;
function startLoading(){
    loading = Loading.service({
        lock: true,
        text: '數據加載中',
        background: 'rgba(0,0,0,0.7)'
    })
}
function endLoading(){
    loading.close();
}
// 請求攔截
axios.interceptors.request.use(config => {
    startLoading();
    return config
}, error => {
    return Promise.reject(error)
})
//響應攔截
axios.interceptors.response.use(response => {
    endLoading();
    return response
}, error => {
    endLoading();
    Message.error(error.response.data)
    return Promise.reject(error)
})
export default axios

這里寫了一些請求攔截和請求響應的代碼，也可以不寫，主要是有一些請求的動畫。這個文件主要的作用是引入了axios

前端axios請求

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios
            .post("/users/register", this.registerUser)
            .then(res => {
              // 注冊成功
              this.$message({
                message: "注冊成功！",
                type: "success"
              });
              // this.$router.push("/login");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }

這就是常規的axios請求了

post("/users/register", this.registerUser)可以保證請求到http://127.0.0.1:5000/api//users/register中后端接口的數據，這里是post請求，即向后端提交數據。

讀到這里，這篇“node后端與Vue前端跨域問題怎么處理”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。