express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域

简介: 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);
      });
  }



     


相关文章
|
1月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
1月前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
144 4
|
1月前
|
JSON 前端开发 Java
前端请求SpringBoot接口出现Required request body is missing
前端请求SpringBoot接口出现Required request body is missing
52 2
|
1月前
|
JSON 前端开发 安全
前端开发中的跨域解决方案探究
跨域是前端开发中常见的问题之一,本文将探讨跨域的概念、产生的原因,以及常见的解决方案,包括JSONP、CORS、代理等。通过本文的学习,读者可以深入了解跨域问题及解决方案,为自己的前端开发工作提供参考。
|
1月前
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
2天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
57 1
前端JS发起的请求能暂停吗?
|
10天前
|
SQL JavaScript 前端开发
简单用Nodejs + express 编写接口
【6月更文挑战第3天】该文介绍了如何在Node.js和Express中创建GET和POST接口。首先,简要提到了准备工作,建议查阅上一篇文章。接着展示了GET接口的示例,说明可以直接在浏览器中请求。然后,详细解释了POST接口的步骤,包括引入Express模块、设置路由处理程序、解析请求体及处理请求。最后,强调了编写接口时应注意错误处理、安全性、中间件使用、路由组织、日志记录、性能优化和测试等关键点。作者以肥晨的身份结尾,鼓励关注其分享的前端学习资料和技术动态。
18 1
|
10天前
|
JSON 前端开发 JavaScript
前端如何实现跨域
前端如何实现跨域
|
30天前
|
JSON 前端开发 JavaScript
第三章 前端发起HTTP请求
第三章 前端发起HTTP请求
|
1月前
|
JSON 中间件 API
在 Express.js 中处理 GET 请求
在 Express.js 中处理 GET 请求