前端请求的路径baseURL怎么来的 ?nodejs解决cors问题的一种方法

本文主要是介绍前端请求的路径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())
...

这篇关于前端请求的路径baseURL怎么来的 ?nodejs解决cors问题的一种方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139057

相关文章

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目,需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径,以下

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试:定位变量错误性能分

Python中 try / except / else / finally 异常处理方法详解

《Python中try/except/else/finally异常处理方法详解》:本文主要介绍Python中try/except/else/finally异常处理方法的相关资料,涵... 目录1. 基本结构2. 各部分的作用tryexceptelsefinally3. 执行流程总结4. 常见用法(1)多个e

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法

《JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法》:本文主要介绍JavaScript中比较两个数组是否有相同元素(交集)的三种常用方法,每种方法结合实例代码给大家介绍的非常... 目录引言:为什么"相等"判断如此重要?方法1:使用some()+includes()(适合小数组)方法2

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

SpringBoot请求参数传递与接收示例详解

《SpringBoot请求参数传递与接收示例详解》本文给大家介绍SpringBoot请求参数传递与接收示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录I. 基础参数传递i.查询参数(Query Parameters)ii.路径参数(Path Va