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前端跨域处理方法详解的文章就介绍到这了,更多相关node跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
