express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域
代码在 ==》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);
});
}
express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域的更多相关文章
- 前端页面调用Spring boot接口发生的跨域问题
最近要重构一个基于spring boot的后端API服务,需要再本地测试.在本地测试时,运行在本地的前端页面发送一个ajax请求访问后端API,然后浏览器报错blocked CORS policy. ...
- vue访问外部接口设置代理,解决跨域(vue-cli3.0)
vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
- 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
- nginx 前后端分离 代理转发,解决跨域问题
场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...
- Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题
webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...
- 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
[手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...
- 前端笔记之服务器&Ajax(下)数据请求&解决跨域&三级联动&session&堆栈
一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...
随机推荐
- Spring 关于ResponseBody注解的作用
//responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求中, //在RequestMapping中 ret ...
- 从零开始的vue学习笔记(三)
事件处理 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例: <div id="example-2"> <!-- `gree ...
- Dubbo学习系列之六(微服务架构实战)
看了最近文章的反馈,似乎波澜不惊的样子,应该是看官觉得都是小菜,那我就直上硬菜,人狠话不多,开始!准备:Idea201902/JDK11/ZK3.5.5/Gradle5.4.1/RabbitMQ3.7 ...
- 关于js的一些被忽视但也很重要的知识点
以为懂了,实际没懂.对新知识保持好奇心很有必要,但对原有知识也要更深入了解其细节.温故知新,"新",应该是自己不懂的,亦或是遗忘了的,亦或是...... 问题1: Object.p ...
- 精通awk系列(7):awk读取行的细节
回到: Linux系列文章 Shell系列文章 Awk系列文章 详细分析awk如何读取文件 awk读取输入文件时,每次读取一条记录(record)(默认情况下按行读取,所以此时记录就是行).每读取一条 ...
- Windows10安装Elasticsearch IK分词插件
安装插件 cmd切换到Elasticsearch安装目录下 C:\Users\Administrator>D: D:\>cd D:\Program Files\Elastic\Elasti ...
- SQL实用技巧:如何分割字符串
create function f_split(@c varchar(2000),@split varchar(2)) returns @t table(col varchar(20)) as beg ...
- Cesium专栏-填挖方分析(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- 【Beta阶段】第十周Scrum会议
[Beta阶段]第十周Scrum会议 本次会议为第十周第一次Scrum Meeting,会议对Alpha阶段的工作进行了反思总结,以及对Beta阶段工作的展望. 会议时间为2019.11.23.会议地 ...
- python 基础学习笔记(4)--字典 和 集合
**字典:** - [ ] 列表可以存储大量的数据,但是如果数据量大的话,他的查询速度比较慢,因为列表只能顺序存储,数据与数据之间的关联性不强.所以便有了字典(dict)这种容器的数据类型,它是以{} ...