背景:后端使用node.js搭建,用的是express
前端请求的路径baseURL怎么来的 ?
- 前后端都在同一台电脑上运行,后端的域名就是localhost,如果使用的是http协议,后端监听的端口号为3000,那么前端请求的基础路径是 'http://localhost:3000' 。
- 前后端不在同一台电脑上运行,那么localhost应该会变成后端电脑的IP地址,那前端请求的路径就变成了:http://xx.xx.xx.xx:3000 ( xx 都是0-255之间的数字)。
另外,监听的端口号(本文这里是3000)可以由后端自定义。
// index.js
const express = require('express')
const app = express()
// 当前端请求的路径为http://localhost:3000/login,后端就会返回 ‘后端接收到了’
app.use('/login', (req,res) => {
res.send('后端接收到了')
})
// 监听3000端口
app.listen(3000, () => {
console.log('start');
})
在浏览器中访问‘http://localhost:3000/login’,页面显示如下:
关于端口号的设置,需要注意的是,本地的react或vue项目可能默认运行在localhost的某个端口(对于react,可能是3000;对于vue,可能是8080,但这也取决于项目的具体配置和所使用的工具),如果后端也运行在本地时,后端监听的端口号不能和前端的为同一个端口。
后端解决cors跨越问题
前端经常遇到的跨域问题cors,用express搭建的后端只需要添加如下设置即可:
安装cors包
npm install cors
// index.js
...
// 解决跨越
const cors = require('cors')
app.use(cors())
...