如何实现Node后端与Vue前端之间的跨域请求处理？

本文共计503个文字，预计阅读时间需要3分钟。

目录 + Node.js后端跨域解决方案 + 前端Vue项目 + 前端Axios请求 + Node.js后端跨域解决方案 + 首先查看后端入口文件： + app.js + const + express=require('express') + const + bodyParser=require('body-parser') + const + cors=require('cors')

目录

• node.js后端跨域解决方案
• 前端vue项目
• 前端axios请求

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 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 './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 = '127.0.0.1:5000/api/'

这行代码是前端项目能跨域的关键

注意import axios from './127.0.0.1:5000/api//users/register中后端接口的数据，这里是post请求，即向后端提交数据。

到此这篇关于node后端与Vue前端跨域处理方法详解的文章就介绍到这了,更多相关node跨域内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！