代码在 ==》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搭建后端请求路由,前端进行访问对应的接口 后端解决跨域的更多相关文章

  1. 前端页面调用Spring boot接口发生的跨域问题

    最近要重构一个基于spring boot的后端API服务,需要再本地测试.在本地测试时,运行在本地的前端页面发送一个ajax请求访问后端API,然后浏览器报错blocked CORS policy. ...

  2. vue访问外部接口设置代理,解决跨域(vue-cli3.0)

    vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...

  3. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  4. Vue使用Axios实现http请求以及解决跨域问题

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...

  5. 无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

    近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...

  6. nginx 前后端分离 代理转发,解决跨域问题

    场景 适用于公司有前端,项目采用前后端分离.类似于我们 后端 springboot 提供接口,前端专门写html调用相应的接口,解决跨域问题 配置说明 worker_processes 1; even ...

  7. Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题

        webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...

  8. 【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  9. 前端笔记之服务器&Ajax(下)数据请求&解决跨域&三级联动&session&堆栈

    一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...

随机推荐

  1. Jenkins使用SSH构建Go项目并执行

    目录 下载插件 配置要部署的服务器 构建项目 Jenkinx可以帮助我们通过SSH插件,将项目直接部署到指定的服务器. 下载插件 (1)点击左侧的"系统管理"菜单 ,然后点击 (2 ...

  2. 在iframe 中视频可以正常播放,但是就是不能全屏。解决方法

    iframe标签加上webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="& ...

  3. How to: Initialize Business Objects with Default Property Values in Entity Framework 如何:在EF中用默认属性值初始化业务对象

    When designing business classes, a common task is to ensure that a newly created business object is ...

  4. 新建GitHub仓库与删除

    一.登录GitHub创建仓库 ,步骤如下: 1.点击新建 2.填写仓库名称等 3.创建完成 二.关联已有的本地项目(没有需要关联的本地项目,可以直接从刚刚创建的GitHub仓库clone) 1.到本地 ...

  5. JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范

    文档下载地址:JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范

  6. arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  7. JEB 无源码调试 以dvm smali字节码方式,Demo尝试

    关于调试器看不到进程,无法attach的问题,网上也有很多教程,基本是修改ro.debugable =1  ,ro.secure = 0 让adbd有root权限 attach到其他进程,涉及到要修改 ...

  8. 增加sudo用户访问oracle

    增加zgy用户可以访问数据库[root@DBDATA ~]# useradd zgy--设置密码[root@DBDATA ~]# passwd zgy--设置组[root@DBDATA ~]# use ...

  9. MongoDB 中聚合统计计算--$SUM表达式

    我们一般通过表达式$sum来计算总和.因为MongoDB的文档有数组字段,所以可以简单的将计算总和分成两种:1,统计符合条件的所有文档的某个字段的总和:2,统计每个文档的数组字段里面的各个数据值的和. ...

  10. Windows 10 神州网信版

    一.版本介绍:官网链接:http://document.cmgos.com/release_notes/release_notes_V0_H 下载链接:请自行百度Windows 10 神州网信政府版( ...