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項目
前端要發(fā)起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: '數(shù)據(jù)加載中', 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; } }); } }
這就是常規(guī)的axios請求了
post("/users/register", this.registerUser)
可以保證請求到http://127.0.0.1:5000/api//users/register
中后端接口的數(shù)據(jù),這里是post請求,即向后端提交數(shù)據(jù)。
到此這篇關于node后端與Vue前端跨域處理方法詳解的文章就介紹到這了,更多相關node跨域內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
node如何實現(xiàn)cmd彈窗交互之inquirer
這篇文章主要介紹了node如何實現(xiàn)cmd彈窗交互之inquirer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10在Node.js中使用Express框架和Mongoose庫實現(xiàn)視頻評論功能
本文我們將詳細介紹如何在Node.js應用中使用Express框架和Mongoose庫來實現(xiàn)一個視頻評論功能,這個功能允許用戶對視頻內容添加評論,并將評論數(shù)實時更新,以下是逐步的實現(xiàn)過程,包括代碼示例和說明,需要的朋友可以參考下2024-04-04nodeJS服務器的創(chuàng)建和重新啟動的實現(xiàn)方法
今天小編就為大家分享一篇nodeJS服務器的創(chuàng)建和重新啟動的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05