node.js后端及Vue前端跨域解决方案
从目前我了解的情况来看，前后端跨域使用的方式有很多种，这里记录我使用最顺手的一种，即在后端使用cors跨域
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 = falsenew 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请求，即向后端提交数据。
