zoukankan      html  css  js  c++  java
  • express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域

    代码在 ==》E: odes实战myserve estserve

    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);
          });
      }
  • 相关阅读:
    php的函数
    php字符串
    PDA触屏的终极解决办法
    数字万用表 选购指南
    WindowsXp Sp2 英文版
    访问局域网某台电脑时提示:无法访问,你可能没有权限使用网络资源.的解决办法
    中华人民共和国国家标准职工工伤与职业病致残程度鉴定
    删除所有设备驱动的批处理
    如何制作Win XP操作系统映像文件
    使用批处理和devcon.exe来控制 Windows 的设备
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11925154.html
Copyright © 2011-2022 走看看