欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

node后端與Vue前端跨域處理方法詳解

 更新時(shí)間:2022年08月31日 09:11:40   作者:黃鋼  
從目前我了解的情況來(lái)看,前后端跨域使用的方式有很多種,這里記錄我使用最順手的一種,即在后端使用cors跨域,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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: '身份認(rèn)證失敗'})
    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,這樣寫(xiě)好之后,就保證你的后端接口可以跨域訪問(wèn)了。

前端vue項(xiàng)目

前端要發(fā)起ajax請(qǐng)求,可以在入口文件main.js中全局掛載axios,而后端的接口則最好寫(xiě)在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/'

這行代碼是前端項(xiàng)目能跨域的關(guān)鍵

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

http.js

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

這里寫(xiě)了一些請(qǐng)求攔截和請(qǐng)求響應(yīng)的代碼,也可以不寫(xiě),主要是有一些請(qǐng)求的動(dòng)畫(huà)。這個(gè)文件主要的作用是引入了axios

前端axios請(qǐng)求

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

這就是常規(guī)的axios請(qǐng)求了

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

到此這篇關(guān)于node后端與Vue前端跨域處理方法詳解的文章就介紹到這了,更多相關(guān)node跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • nodejs簡(jiǎn)單實(shí)現(xiàn)操作arduino

    nodejs簡(jiǎn)單實(shí)現(xiàn)操作arduino

    本文給大家分享的是使用nodejs來(lái)驅(qū)動(dòng)arduino,主要是基于cylonjs 和 gort,有需要的小伙伴可以參考下
    2016-09-09
  • nodejs搭建本地http服務(wù)器教程

    nodejs搭建本地http服務(wù)器教程

    本篇文章主要介紹了nodejs搭建本地http服務(wù)器教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • Node.js中如何合并兩個(gè)復(fù)雜對(duì)象詳解

    Node.js中如何合并兩個(gè)復(fù)雜對(duì)象詳解

    下面這篇文章主要給大家介紹了在Node.js中如何合并兩個(gè)復(fù)雜對(duì)象的方法,文中給出了詳細(xì)的示例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋友可以參考,下面來(lái)一起看看吧。
    2016-12-12
  • node如何實(shí)現(xiàn)cmd彈窗交互之inquirer

    node如何實(shí)現(xiàn)cmd彈窗交互之inquirer

    這篇文章主要介紹了node如何實(shí)現(xiàn)cmd彈窗交互之inquirer問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Express之托管靜態(tài)文件的方法

    Express之托管靜態(tài)文件的方法

    本篇文章主要介紹了Express之托管靜態(tài)文件的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • 淺談Node.js 中間件模式

    淺談Node.js 中間件模式

    中間件在 Node.js 中被廣泛使用,它泛指一種特定的設(shè)計(jì)模式、一系列的處理單元、過(guò)濾器和處理程序,以函數(shù)的形式存在,這篇文章主要介紹了淺談Node.js 中間件模式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • 在Node.js中使用Express框架和Mongoose庫(kù)實(shí)現(xiàn)視頻評(píng)論功能

    在Node.js中使用Express框架和Mongoose庫(kù)實(shí)現(xiàn)視頻評(píng)論功能

    本文我們將詳細(xì)介紹如何在Node.js應(yīng)用中使用Express框架和Mongoose庫(kù)來(lái)實(shí)現(xiàn)一個(gè)視頻評(píng)論功能,這個(gè)功能允許用戶對(duì)視頻內(nèi)容添加評(píng)論,并將評(píng)論數(shù)實(shí)時(shí)更新,以下是逐步的實(shí)現(xiàn)過(guò)程,包括代碼示例和說(shuō)明,需要的朋友可以參考下
    2024-04-04
  • yarn的安裝及使用詳解

    yarn的安裝及使用詳解

    Yarn 就是一個(gè)類似于 npm 的包管理工具,它是由 facebook 推出并開(kāi)源,與 npm 相比,yarn 有著眾多的優(yōu)勢(shì),主要的優(yōu)勢(shì)在于:速度快、離線模式、版本控制,這篇文章主要介紹了yarn的安裝及使用教程,需要的朋友可以參考下
    2022-08-08
  • nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法

    nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法

    今天小編就為大家分享一篇nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • 一文帶你搞懂Node中的流

    一文帶你搞懂Node中的流

    流,通俗來(lái)講就是數(shù)據(jù)流動(dòng),數(shù)據(jù)從一個(gè)地方緩慢的流到另一個(gè)地方。本文將通過(guò)示例為大家詳細(xì)講講Node中的流,感興趣的可以了解一下
    2022-08-08

最新評(píng)論