之前一直听说前后端分离好,但从来没有自己动手实践过!因为发现了对于自己的知识高端一点的判断用户是否已登录,想自己尝试下,顺带搭建一个前后端分离的环境
- vue
我使用的是vue-cli3,关于安装配置,官网已经讲的很明了了 - node.js
- 我使用的是express框架,安装环境什么的,网上也已经有很多了。
- express的默认端口为3000,而vue的默认端口为8080,想要发送请求,势必需要处理跨域问题。
- 通过添加响应头解决跨域:
- 安装cors包
npm install cors --save
- 在app.js中,引入cors,并添加响应头
app.use(cors({ origin:['http://localhost:8080'], // 允许这个域访问 methods:['GET','POST'], // 允许的请求方法 allowedHeaders:['Conten-type','Authorization'] }))
- 在routers正常做数据请求,并在app.js中引入即可。
- vue:在main中加入
axios.defaults.baseURL = "http://localhost:3000";
- vue中发送api请求即可。