当前位置: 首页 > news >正文

前后端交互的路径怎么来的?后端解决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())
...

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【Python篇】Python 类和对象:详细讲解(中篇)
  • OpenCV杂项图像变换(1)自适应阈值处理函数adaptiveThreshold()的使用
  • Study Plan For Algorithms - Part18
  • (三)Kafka离线安装 - ZooKeeper开机自启
  • 音频如何低延时回声消除与降噪篇保姆级教程
  • Java算法之希尔排序(Shell Sort)
  • 深入理解Python中的属性(Property)及其用途
  • 代码随想录day1数组/字符串总结
  • java中的Opencv:Opencv简介与开发环境部署
  • win主机整改建议
  • 深度学习100问38:什么是阿达玛乘积
  • 已经git push,但上传的文件超过100MB
  • 【软考】【多媒体应用设计师】元数据与数字对象标识码
  • 利用开源 AI 智能名片 O2O 商城系统提升饭店私域流量
  • Vue.js入门系列(十八):利用浏览器本地存储实现TodoList数据持久化
  • es6(二):字符串的扩展
  • HTTP 简介
  • Java Agent 学习笔记
  • Java 内存分配及垃圾回收机制初探
  • javascript面向对象之创建对象
  • java小心机(3)| 浅析finalize()
  • swift基础之_对象 实例方法 对象方法。
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 每天10道Java面试题,跟我走,offer有!
  • 深入浅出Node.js
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (1)svelte 教程:hello world
  • (12)目标检测_SSD基于pytorch搭建代码
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (NSDate) 时间 (time )比较
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (接上一篇)前端弄一个变量实现点击次数在前端页面实时更新
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (四)汇编语言——简单程序
  • (算法)Game
  • (译)计算距离、方位和更多经纬度之间的点
  • (游戏设计草稿) 《外卖员模拟器》 (3D 科幻 角色扮演 开放世界 AI VR)
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • ***详解账号泄露:全球约1亿用户已泄露
  • .NET Framework .NET Core与 .NET 的区别
  • .net经典笔试题
  • .Net语言中的StringBuilder:入门到精通
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务
  • [100天算法】-不同路径 III(day 73)
  • [2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
  • [AIGC] MySQL存储引擎详解
  • [C++][数据结构][跳表]详细讲解
  • [FreeRTOS 基础知识] 栈
  • [IE9] IE9 RC版下载链接
  • [lesson17]对象的构造(上)
  • [linux] C语言Linux系统编程进程基本概念