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);
      });
  }

原文地址:https://www.cnblogs.com/IwishIcould/p/11925154.html

时间: 2024-08-07 22:52:07

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

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

    webservice 代码 1 /// <summary> 2 /// MESService 的摘要说明 3 /// </summary> 4 [WebService(Namespace = "http://tempuri.org/")] 5 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 6 //[System.ComponentModel.ToolboxItem(false)

springboot shiro 前后端分离,解决跨域、过虑options请求、shiro管理session问题、模拟跨域请求

一.解决跨域.过虑options请求问题 1.创建过虑类 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; im

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

flask后端+ajax前端,解决跨域资源引起CORB问题

在 Javascript 中跨域访问是比较常见的事情,这次记录使用flask写后端API,前端ajax调用时产生的跨域问题. 问题描述:跨域资源引起CORB. 解决方案: jsonp解决跨域问题 前端代码: // 回掉函数,默认callback=jQuery30004159376653216822_1550582355513 function showData(data) { console.info("Get Into showData"); // json对象转成字符串 var r

SpringBoot解决跨域请求拦截

前言 同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.com下,脚本不能够访问https://www.sina.com源下的资源,否则将会被浏览器拦截. 注意两点: 1.必须是脚本请求,比如AJAX请求. 但是如下情况不会产生跨域拦截 <img src="xxx"/> <a href='xxx"> </a&

前端开发如何独立解决跨域问题

背景 跨域是由浏览器同源策略引起的,是指页面请求的接口地址,必须与页面url地址处于同域上(即域名,端口,协议相同).这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施出发点是好的,但在项目开发的过程中,常常给前端开发者带来麻烦. 由于页面开发中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利进行接口调用. 解决跨域问题常用的解决方案有两个

手把手教你实现Java权限管理系统 后端篇(十二):解决跨域问题

什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. 举个栗子 判断下面URL是否和 http://www.a.com/a/a.html 同源 http://www.a.com/b/b.html 同源 http://www.b.com/a/a.html 不同源,域名不相同 https://www.a.com/b/b.html 不同源,协议不相同 htt

前端通过Nginx反向代理解决跨域问题

本文探讨了前端如何通过Nginx反向代理的方式解决跨域问题. 跨域 再次重申: 跨域是浏览器行为,不是服务器行为. 实际上,请求已经到达服务器了,只不过在回来的时候被浏览器限制了.就像Python他可以进行抓取数据一样,不经过浏览器而发起请求是可以得到数据,想到通过Nginx的反向代理来解决跨域问题. 代理 所谓代理就是在我们和真实的服务器之间有一台代理服务器,我们所有的请求都是通过它来进行转接的. 正向代理 正向代理就是我们访问不了Google,但是我在国外有一台vps,它可以访问Google

SpringSecurity解决跨域问题,在SpringBoot整合SprinSecurity中如何用前后端分离Ajax登录,Ajax登录返回状态200还是近error

先说说SpringSecurity如何实现前后端分离Ajax登录? 今天使用SpringBoot整合SpringSecurity中想使用Ajax替代SpringSecurit的Form表单提交,在这里我们的提交方式还是使用表单提交 http.formLogin().loginProcessingUrl("/authentication/form") loginProcessingUrl方法表示你登录请求的地址,在这里SpringSecurity默认登录页面地址是/login ,填写了u