前端请求的路径baseURL怎么来的 ?nodejs解决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.xdnf.cn/news/1523372.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

视频合并在线工具哪个好?好用的视频合并工具推荐

当我们手握一堆零散却各有千秋的视频片段时,是否曾幻想过它们能像魔法般合并成一部完整、流畅的故事? 别担心,今天咱们就来一场“视频合并大冒险”,揭秘几款视频合并软件手机免费工具,帮助你在指尖上实现创意无限的视…

每日一题 背包,dp,兵营力量训练

首先,读完这题我一开始有点懵,分析了条件后还是不知道怎么分配比较完美,一开始想一直给最小的那个分配呗,但这不知道分配的力量是多少,没有一个界线,所以要找一个界线,最后还是看了别人的参考答…

数据首发!高阶ADAS摄像头搭载量同比增超80%,11V占据主流

高工智能汽车研究院:高阶ADAS摄像头搭载量同比增长超80%,11V占据主流 随着高阶新车智驾的加速落地,也带动核心ADAS摄像头搭载量爆发式增长 高工智能汽车研究院监测数据显示,今年1-6月中国市场(不含进出口)乘用车前装标配NOA(含硬件标配)搭载…

【C++】vector类:模拟实现(适合新手手撕vector)

在实现本文的vector模拟前,建议先了解关于vector的必要知识:【C】容器vector常用接口详解-CSDN博客https://blog.csdn.net/2301_80555259/article/details/141529230?spm1001.2014.3001.5501 目录 一.基本结构 二.构造函数(constructor&…

elementUI根据列表id进行列合并@莫成尘

本文章提供了elementUI根据列表id进行列合并的demo&#xff0c;效果如图&#xff08;可直接复制代码粘贴&#xff09; <template><div id"app"><el-table border :data"tableList" style"width: 100%" :span-method"objectS…

C++从入门到起飞之——list使用 全方位剖析!

​ &#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、迭代器 2、push_back与emplace_back 3、list成员函数sort与库sort比较 4、merge 5、uniqu…

讨论运维监控工具的普及程度

在讨论运维监控工具的普及程度时&#xff0c;加入PIGOSS BSM产品的分析是非常有意义的&#xff0c;因为PIGOSS BSM是一款在中国市场具有一定影响力的运维监控工具。 PIGOSS BSM运维监控工具是一款综合性的IT运维监控解决方案&#xff0c;它能够对多层次的IT资源进行监测&#x…

MQTT Client源码分析

MQTT Client源码分析 目录 MQTT Client源码分析1. mqttclient架构1.1 API1.2 mqtt_client_t结构体1.3 mqtt_yield_thread内部线程1.4 keepalive1.5 ack链表 2. mqttclient流程2.1 MQTT CONNECT2.2 MQTT SUBSCRIBE2.3 MQTT PUBLISH2.4 接收服务器PUBLISH消息 之前基于杰杰的mqtt…

大数据-118 - Flink DataSet 基本介绍 核心特性 创建、转换、输出等

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

手机怎么把wmv转换成mp4格式?视频格式这样做,让你的视频更加通用

“我最近想在手机上编辑视频&#xff0c;但遇到一个问题&#xff0c;就是我有一些wmv格式的视频&#xff0c;想把它们转换成mp4格式&#xff0c;好把它们发布到平台上。但是我不会转格式。请问手机怎么把wmv转换成mp4格式呢&#xff1f;请大家帮帮我。” 格式转换对于没怎么接…

JAVA 二维码生成

1.pom依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version></dependency><dependency><groupId>com.google.zxing</groupId><artifactId>ja…

四川财谷通抖音小店创新引领新风尚

在数字化浪潮的推动下&#xff0c;电商行业蓬勃发展&#xff0c;抖音小店作为新兴的电商平台&#xff0c;凭借其独特的社交属性和便捷的购物体验&#xff0c;迅速赢得了广大消费者的青睐。在众多抖音小店中&#xff0c;四川财谷通抖音小店以其精准定位、高质量内容、一站式服务…

智慧公厕:城市公共卫生管理的新篇章‌@卓振思众

在快节奏的现代生活中&#xff0c;公共厕所作为城市基础设施的重要组成部分&#xff0c;其使用体验和管理效率直接影响着市民的生活质量与城市形象。随着科技的飞速发展&#xff0c;智慧公厕应运而生&#xff0c;它以一种全新的姿态&#xff0c;为城市公共卫生管理带来了前所未…

鸿蒙Harmony--状态变量更改通知--@Watch装饰器详解

风雨飘摇中&#xff0c;我心起伏&#xff0c; 万丈雄心&#xff0c;却难以施展。 天高地远&#xff0c;路途迷茫&#xff0c; 理想如星&#xff0c;却遥不可及。 千百次跌倒&#xff0c;千百次爬起&#xff0c; 在命运的手掌中&#xff0c;挣扎前行。 谁知我心中的热血滚烫&…

向 ADC 模型和 DAC 建模添加低通滤波器

与单音测试信号相比&#xff0c;双音测试信号可提供更多有关 ADC 性能的信息。您的作者的模型与特定 ADC 的制造商模型非常匹配&#xff0c;因此可以方便地运行误码率模拟。该 ADC 恰好具有非常宽的输入带宽。 对于带宽较低的 ADC&#xff0c;添加如图 1 所示的低通滤波器将提…

用亚马逊AI代码开发助手Amazon Q Developer开发小游戏(中篇)

快用人工智能帮程序员写代码、开发游戏&#xff01;今天小李哥就来介绍亚马逊推出的国际前沿人工智能AI代码开发助手Amazon Q Developer。目前该代码助手在Hugging Face代码生成权威测试集SWE-bench中排名第一&#xff0c;可以根据我们的需求生成整个代码项目&#xff0c;并可以…

IDEA莫名奇妙自动选择光标所在行 -罪魁祸首居然是钉钉

请看受害者视角 作为开发者&#xff0c;工作时基本都会运行钉钉吧。最近&#xff0c;钉钉更新了AI功能&#xff0c;但不知道是不是开发团队平时不使用IDE&#xff0c;竟然让这个AI功能影响到了其他软件&#xff0c;简直让人无语。不仅仅是IDEA受影响&#xff0c;就连WebStorm也…

QQ聊天记录删除了怎么恢复?学会这3个方法,简单又有效

QQ作为我们日常沟通的重要工具之一&#xff0c;其聊天记录往往承载着许多珍贵的记忆和重要的信息。但在操作中我们会不小心删除或丢失这些聊天记录&#xff0c;那么QQ聊天记录删除了怎么恢复就成为我们急切需要解决的问题。先别急&#xff0c;本文就为你介绍3种简单又有效的QQ聊…

【Qt笔记】QListWidget控件详解

目录 引言 一、基本概念和特性 二、基本用法 2.1 创建和初始化 2.2 添加和删除项 2.3 选择和遍历项 三、信号与槽 3.1 itemClicked 3.2 itemDoubleClicked 3.3 itemSelectionChanged 四、自定义项 五、排序和查找 六、代码示例 6.1 头文件 6.2 源文件 6.3 主…

腾讯云TRTC无UI集成——分享屏幕主流、辅流(Vue2+JS+TRTC无UI集成)

先阐述一下问题&#xff0c;在项目中用到腾讯云的TRTC&#xff0c;A端发布A1、A2两个视频源&#xff0c;在B端订阅A1、A2使用两个view进行播放渲染 问题主流视频源和辅流视频源渲染在同一view上&#xff0c;控制台报错 // 播放远端视频 TRTCService.js; setRemoteVideo(view)…