express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域
2023-09-27 14:22:20 时间
代码在 ==》E:\nodes实战\myserve\testserve
1 express搭建后端请求路由,前端进行访问对应的接口
1) 创建项目目录
express 项目名 -e
然后按照提示就可以了
cd 项目名
2) 进入项目 下载依赖
cnpm i
在下载过程中出现
New minor version of npm available! 6.11.2 -> 6.13.1
Changelog: https://github.com/npm/cli/releases/tag/v6.13.1
Run npm install -g npm to update! (运行npm install-g npm进行更新!)
跟新就可以了
3) 在app.js 中 在(module.exports = app;前添加)就是在第40行 添加如下,监听端口
app.listen(666, () => {
console.log('后端服务器启动成功,地址是: http://127.0.0.1:666')
})
4) 启动项目
nodemon app
然后输入 http://127.0.0.1:666 就会出现界面
介绍一下后端的项目目录
bin
public
routes 路由接口
views
app.js文件
package.json 包描述文件
复制一份routes下的users.js文件,用来做account的请求 然后命名为account.js文件如下
{
var express = require('express');
var router = express.Router();
// 统一设置响应头 解决跨域问题
router.all("*", (req, res, next) => {
// 设置响应头 解决跨域(目前最主流的方式)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "authorization");
next();
});
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('解决了跨域哈');
});
module.exports = router;
}
然后再app.js中去 给/test分配一个路由
vvar accountRouter = require('./routes/account'); //分配路由 在地10行
app.use('/account',accountRouter ); //使用路由 在第28行
然后在页面输入http://127.0.0.1:666/account
就会出现 解决了跨域哈 说明路由配置成功
前端 created() { axios .get("http://127.0.0.1:666/account") .then(res => { this.mesg = res.data; window.console.log(res.data);//解决了跨域哈 }) .catch(err => { window.console.log(err); }); }
相关文章
- 匿名洋葱路由Tor,又添了一层新加密算法
- 投资极路由,我们在投什么?
- 136.(后端)订单管理物流信息接口编写——注册路由方式获取降序数据
- 112.(后端)商品管理商品列表接口实现——flask框架使用蓝图与restful查询数据(创建路由方式)
- 97.(后端)分类参数获取列表接口实现——flask创建路由方式发送请求查询数据
- 74.(后端)删除角色权限接口实现——用路由来接收参数实现层级删除功能
- MVC路由解析---IgnoreRoute
- Spring cloud:网关-Zuul路由
- drf url路由在函数上指定url绑定的方法
- Vue 路由组件传参的 8 种方式
- [ARM异常]-armv8/armv9异步异常类型、路由、屏蔽
- Traceroute(路由追踪)的原理及实现
- ASP.NET MVC路由扩展:路由映射
- 【Vue 开发实战】实战篇 # 31:如何将菜单和路由结合
- 你必须知道的路由原理
- 网络层——AS 间路由选择协议
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)