前后端交互的路径怎么来的?后端解决cors问题的一种方法

背景:后端使用node.js搭建,用的是express

前端请求的路径baseURL怎么来的 ?

  • 前后端都在同一台电脑上运行,后端的域名就是localhost,如果使用的是http协议,后端监听的端口号为3000,那么前端请求的基础路径是 'http://localhost:3000' 。
  • 前后端不在同一台电脑上运行,那么localhost应该会变成后端电脑的IP地址,那前端请求的路径就变成了:http://xx.xx.xx.xx:3000 ( xx 都是0-255之间的数字)。

另外,监听的端口号(本文这里是3000)可以由后端自定义。

// index.js
const express = require('express')
const app = express()// 当前端请求的路径为http://localhost:3000/login,后端就会返回 ‘后端接收到了’
app.use('/login', (req,res) => {res.send('后端接收到了')
})// 监听3000端口
app.listen(3000, () => {console.log('start');  
})

  在浏览器中访问‘http://localhost:3000/login’,页面显示如下:

 

关于端口号的设置,需要注意的是,本地的react或vue项目可能默认运行在localhost的某个端口(对于react,可能是3000;对于vue,可能是8080,但这也取决于项目的具体配置和所使用的工具),如果后端也运行在本地时,后端监听的端口号不能和前端的为同一个端口。

后端解决cors跨越问题

前端经常遇到的跨域问题cors,用express搭建的后端只需要添加如下设置即可:

安装cors包

npm install cors
// index.js
...
// 解决跨越
const cors = require('cors')
app.use(cors())
...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/52727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django+Vue音乐推荐系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者&…

脚手架工具的应用(前端和后端搭建)

前端 一、安装 Node.js 环境 使用npm下载镜像 查看镜像:npm config get registry 切换淘宝镜像:npm config set registry https://registry.npmmirror.com 还原镜像:npm config set registry https://registry.npmjs.org 二、使用 Vue.js 脚…

智能停车场管理小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,车位信息管理,车位预订管理,系统管理 微信端账号功能包括:系统首页,地图,我的 开发系统:Windows 架构模式…

如何将开发工具设置成滚动鼠标改变字体大小

就在刚刚与温州那边技术开会,温州那边技术提出:字体太小,代码看不清,需要将字体放大。然后让我将IDE设置成按住键盘的Ctrl滚动鼠标,可以放大字体大小。。。顿时间的小小尴尬。下面我来记录一下究竟是怎么操作的&#x…

安装WMware和Ubuntu并使用xShell连接

0、我的电脑配置 设备名称 hello 处理器 Intel(R) Core(TM) i7-10700K CPU 3.80GHz 3.79 GHz 机带 RAM 16.0 GB (15.9 GB 可用) 设备 ID 541EC230-9910-418C-9043-5FBBF8ED320C 产品 ID 00330-80000-00000-AA846 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可…

汽车功能安全--TC3xx LBIST触发时机讨论

目录 1. LBIST架构 2. LBIST寄存器配置 3. LBIST触发时机 LBIST,全称Logic Built-in Self Test。 在TC3xx中,LBIST是一种硬件功能安全机制,目的是为了探测MCU内部逻辑电路的潜伏故障(latent faults)。 从使用者角度来看,只需…

K8S 1.31 新功能: 跨核分发CPU

​在Kubernetes的最新版本1.31中,一个超酷的新功能,叫做CPUManager的静态策略,里面有个选项叫做distribute-cpus-across-cores。虽然这个功能现在还在测试阶段,也就是alpha版,而且默认是藏起来的,但它的目的…

腾讯提出一种新的针对风格化角色和逼真服装动画的生成3D运动转移方法,生成效果逼真!

来自腾讯XR视觉实验室的研究团队提出了一种创新的3D运动转移方法,专门针对风格化角色和逼真服装动画的生成。该方法能够将源动作准确地映射到目标角色上,同时考虑了角色身体的刚性变形和服装的局部物理动态变形。 与现有技术相比,这技术不仅…

docker Desktop报错 error pulling image configuration 处理

问题描述 在 docker 拉数据 出现以下错误 error pulling image configurarion: 这个问题 主要是 可能应该某些原因不能网络无法连上镜像 原因分析: 1。 2024年 5月以后 国内很多IP都 。。。懂的都懂,很多 VPN 也是。。。 懂的都懂&#x…

C++类和对象(5)——运算符重载(以日期类为例)

运算符重载的作用 假设我们此时实现了日期类的运算符重载,我们就可以 实现如图的很多功能,完成日期计算器的底层代码。 运算符重载关键字 运算符重载的关键字是operator。 比如你想重载‘’运算符,那么语法格式就是 返回类型 operator …

算法设计与分析:实验三 回溯法——地图填色问题

实验内容与要求: 问题描述: 我们可以将地图转换为平面图,每个地区变成一个节点,相邻地区用边连接,我们要为这个图形的顶点着色,并且两个顶点通过边连接时必须具有不同的颜色。附件是给出的地图数据&#…

仿华为车机UI--图标从Workspace拖动到Hotseat同时保留图标在原来位置

基于Android13 Launcher3,原生系统如果把图标从Workspace拖动到Hotseat里则Workspace就没有了,需求是执行拖拽动作后,图标同时保留在原位置。 实现效果如下: 实现思路: 1.如果在workspace中拖动,则保留原来“改变图标…

Scratch教学案例-《三顾茅庐》:让编程学习如同故事般引人入胜

三顾茅庐-小虎鲸Scratch资源站 在编程的世界里,我们常常寻找那种既能激发创意,又能提升技能的学习方式。今天,小虎鲸Scratch资源站为您带来了一款独特的教学作品——《三顾茅庐》。这是一部将经典故事与编程教学巧妙结合的Scratch项目&#x…

在docker中安装skywalking + es

ES的版本和官网 es版本: Past Releases of Elastic Stack Software | Elastic es版本logstash版本JDK版本对应关系 支持一览表 | Elastic skywalking的版本说明和官网 Advanced deployment | Apache SkyWalking skywalking和es的对应关系,在网页的…

读书笔记:《深入理解Java虚拟机》(4)

垃圾收集器与内存分配策略 一、对象已死? 堆中几乎放着所有的对象实例,对堆垃圾回收前的第一步就是要判断哪些对象已经死亡(即不能再被任何途径使用的对象)。 引用计数法 给对象中添加一个引用计数器: 每当有一个…

day03-面向对象-内部类泛型常用API

一、内部类 内部类是类中的五大成分之一(成员变量、方法、构造器、代码块、内部类) 如果一个类定义在另一个类的内部,这个类就是内部类。 场景:当一个类的内部,包含了一个完整的事物,且这个事物没有必要单…

bitmap(位图)的使用

零存零取,整存零取,整存整取, 零存整取 bitmap介绍 位图不是真正的数据类型,它是定义在字符串类型中,一个字符串类型的值最多能存储512M字节的内容, 位上限:2^(9(512)10(1024)10(1024)3(8b1B))2^32b 语句操作: s…

[报错] nvcc -V 找不到

报错: nvcc : 无法将“nvcc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,ObjectNotFound: (nvcc:String) [], CommandNotFoundExceptionFullyQualifiedErrorId : CommandNotFoundException 找不到 nvcc -V,试过…

鸿蒙(API 12 Beta5版)【通过文本生成码图】

基本概念 码图生成能力支持将字符串转换为自定义格式的码图。 场景介绍 码图生成能力支持将字符串转换为自定义格式的码图,包含条形码、二维码生成。 可以将字符串转成联系人码图,手机克隆码图,例如将"HUAWEI"字符串生成码图使…

深度学习系列71:表格检测和识别

1. pdf处理 如果是可编辑的pdf格式,那么可以直接用pdfplumber进行处理: import pdfplumber import pandas as pdwith pdfplumber.open("中新科技:2015年年度报告摘要.PDF") as pdf:page pdf.pages[1] # 第一页的信息text pag…