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

node.js中跨域请求有几种实现方法

news 2025/12/28 13:34:18

默认情况下，出于安全考虑，浏览器会实施同源策略，阻止网页向不同源的服务器发送请求或接收来自不同源的响应。

同源策略：协议、域名、端口三者必须保持一致

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
</head>
<body><button id="btnGet">get请求</button><button id="btnPost">post请求</button><script>$('#btnGet').on('click', function(){console.log('点击get请求')$.ajax({type: 'GET',url: 'http://127.0.0.1:3000/api/get',data: {name: 'lbj',number: 23},success: (res) =>{console.log(res, 'get请求成功')}})})$('#btnPost').on('click', function(){console.log('点击post请求')$.ajax({type: 'POST',url: 'http://127.0.0.1:3000/api/post',data: {name: 'lbj',number: 23},success: (res) =>{console.log(res, 'get请求成功')}})})</script>
</body>
</html>

在这里插入图片描述

常见的解决跨域请求的方法

  • CORS（跨源资源共享）
  • JSONP
  • 代理服务器
  • Nginx反向代理

CORS的实现原理

CORS的核心原理是通过在HTTP响应头中添加特定的CORS相关字段，告诉浏览器哪些域名是被允许的，从而解决跨域请求的问题。这些字段包括：

Access-Control-Allow-Origin：指定允许访问的域名。可以是单个域名，也可以是逗号分隔的多个域名，或者使用通配符*表示允许所有域名访问。
Access-Control-Allow-Methods：指定允许的HTTP方法。例如，GET、POST等。
Access-Control-Allow-Headers：指定允许的HTTP头部。例如，Content-Type等。
Access-Control-Allow-Credentials：表示是否允许发送包含凭据的请求，如Cookie。默认情况下，不发送凭据。
Access-Control-Expose-Headers：指定哪些HTTP头部可以被浏览器访问。

CORS实现方法

// 安装中间件
// npm install cors
// 导入中间件
const cors = require('cors')
// 配置中间件，要在路由之前
app.use(cors())

在这里插入图片描述

CORS的优缺点

优点：
标准化：CORS是W3C标准，被广泛支持。
灵活性：可以通过配置允许特定的源、方法和头。
安全性：可以明确指定哪些资源可以被跨域访问。
缺点：
配置复杂性：需要仔细配置CORS策略，以确保安全性和功能性。
浏览器兼容性：虽然现代浏览器都支持CORS，但某些旧版本浏览器可能不支持或支持不完全。

jsonp的实现方法

JSONP是一种通过script标签的src属性来实现跨域请求的技术。由于script标签不受同源策略的限制，因此可以加载不同源的脚本。JSONP通常用于GET请求。

jsonp的优缺点

优点：
兼容性：JSONP在旧版本浏览器中也被广泛支持。
简单易用：实现起来相对简单，不需要额外的中间件或配置。缺点：
安全性：JSONP存在安全风险，因为它允许跨域执行脚本。
局限性：只支持GET请求，不支持POST等其他HTTP方法。

jsonp的实现

// html
<button id="btnJsonp">jsonp请求</button>

// javascript
$('#btnJsonp').on('click', function(){console.log('点击jsonp请求')$.ajax({method: 'GET',url: 'http://127.0.0.1:3000/api/jsonp',dataType: 'jsonp', success: (res) =>{console.log(res, 'jsonp请求成功')}})
})

// 服务端
router.get('/jsonp', (req, res)=>{// 获取客户端发送过来的回调函数的名字const funcName = req.query.callback;// 发送给客户端的数据const data = {name: 'lbj', number: 23}// 拼接函数回调的字符串const str = `${funcName}(${JSON.stringify(data)})`res.send(str)
})

在这里插入图片描述

代理服务器

实现方式：代理服务器充当客户端和目标服务器之间的中介。客户端向代理服务器发起请求，代理服务器再将请求转发给目标服务器，并将响应返回给客户端。通过这种方式，可以绕过浏览器的同源策略。

优点：
灵活性：可以处理各种跨域请求，包括POST等HTTP方法。
安全性：可以通过代理服务器进行身份验证和授权。
缺点：
实现复杂性：需要设置和维护代理服务器。
性能影响：代理服务器可能会增加请求延迟和带宽消耗。

Nginx反向代理

实现方式：通过Nginx配置反向代理，将跨域请求转发到Node.js应用。

优点：
性能：Nginx是一个高性能的HTTP服务器和反向代理服务器。
安全性：可以通过Nginx进行SSL/TLS加密和身份验证。
缺点：
配置复杂性：需要熟悉Nginx的配置和管理。
依赖性：需要额外的Nginx服务器。

相关文章：

node.js中跨域请求有几种实现方法

默认情况下&#xff0c;出于安全考虑&#xff0c;浏览器会实施同源策略&#xff0c;阻止网页向不同源的服务器发送请求或接收来自不同源的响应。 同源策略&#xff1a;协议、域名、端口三者必须保持一致 <!DOCTYPE html> <html lang"en"> <head>&l…...

编程日记 2024/12/8 15:16:10

Node.js新作《循序渐进Node.js企业级开发实践》简介

《循序渐进Node.js企业级开发实践》由清华大学出版社出版&#xff0c;已于近期上市。该书基于Node.js 22.3.0编写&#xff0c;提供26个实战案例43个上机练习&#xff0c;可谓是目前市面上最新的Node.js力作。 本文对《循序渐进Node.js企业级开发实践》一书做个大致的介绍。 封…...

编程日记 2024/12/8 15:12:04

常见排序算法总结 (四) - 快速排序与随机选择

快速排序 算法思想 每一轮在数组相应的范围上随机找一个元素进行划分&#xff0c;将不大于它的所有元素都放到左边&#xff0c;将大于它的元素都放到右边。在左右两个子数组上不断地递归&#xff0c;直到整个数组上有序。 注意&#xff1a;实现时选择的时参考荷兰国旗问题优化…...

编程日记 2024/12/8 15:09:01

Doris的基础架构

Doris的基础架构 Frontend&#xff08;FE&#xff09;&#xff1a;主要负责用户请求的接入、查询解析规划、元数据的管理、节点管理相关工作。Backend&#xff08;BE&#xff09;&#xff1a;主要负责数据存储、查询计划的执行。 我的Github地址&#xff0c;欢迎大家加入我的开…...

编程日记 2024/12/8 15:05:54

python录制鼠标键盘操作循环播放

依赖 pip install pynput 程序: from pynput import mouse, keyboard import time import threading# 用于存储录制的鼠标和键盘事件 mouse_events [] keyboard_events []# 定义事件处理函数# 处理鼠标事件 def on_move(x, y):mouse_events.append((move, x, y))def on_cl…...

编程日记 2024/12/8 14:59:47

标书里的“废标雷区”：你踩过几个？

在投标领域&#xff0c;标书的质量不仅决定了中标的可能性&#xff0c;更是体现企业专业度的关键。但即便是经验丰富的投标人&#xff0c;也难免会在标书编制过程中踩中“废标雷区”。这些雷区可能隐藏在技术方案的细节中&#xff0c;也可能是投标文件格式的规范问题。以下&…...

编程日记 2024/12/8 14:57:44

centos下使用acme来自动获取免费通配符ssl证书,并发布到nginx服务,(DNS服务为阿里云)

参考链接: 官方文档 acme.sh获取证书 # 下载acme的项目 git clone https://gitee.com/neilpang/acme.sh.git # 执行安装脚本 cd acme.sh ./acme.sh --install -m myexample.com # 安装脚本会新增一个定时任务,这个命令可以检查 crontab -l # 从阿里云获取ks,写入 export Ali_…...

编程日记 2024/12/8 14:54:41

基于协同过滤的图书推荐系统 爬虫分析可视化【源码+文档】

【1】系统介绍 研究背景 随着互联网的普及和电子商务的发展&#xff0c;用户可以在线获取大量的图书资源。然而&#xff0c;面对海量的信息&#xff0c;用户往往难以找到自己真正感兴趣的书籍。同时&#xff0c;对于在线书店或图书馆等提供图书服务的平台来说&#xff0c;如何…...

编程日记 2024/12/8 14:52:39

Hyperf jsonrpc

依赖的 composer 包 composer require hyperf/json-rpc composer require hyperf/rpc-server composer require hyperf/rpc-client composer require hyperf/service-governance composer require hyperf/service-governance-consul composer require hyperf/service-gove…...

编程日记 2024/12/8 14:49:34

计算机毕业设计Spark股票推荐系统 股票预测系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2024/12/8 14:48:33

Linux系统下安装配置 Nginx 超详细图文教程

一、下载Nginx安装包 nginx官网&#xff1a;nginx: downloadhttp://nginx.org/en/download.html找到我们所需要版本&#xff0c;把鼠标移动到上面&#xff0c;右键打开链接进行下载 或者如果Linux联网&#xff0c;直接在Linux服务上使用wget命令把Nginx安装包下载到/usr/local/…...

编程日记 2024/12/8 14:45:29

语言处理程序基础

逻辑运算 正规式 有限自动机 上下文无关文法 表达式&#xff08;前缀、后缀、中缀&#xff09; 将表达式&#xff08;a-b&#xff09;*&#xff08;c5&#xff09;构造成树的步骤为&#xff1a;括号不能出现在树中&#xff1b;按照表达式的计算顺序来依次构造&#xff01;&…...

编程日记 2024/12/8 14:44:28

golang实现简单的redis服务

golang 手搓redis服务器仓库地址:实现思路: golang 手搓redis服务器 仓库地址: 仓库: https://github.com/dengjiayue/my-redis.git 实现思路: ● 协议: tcp通信 ● 数据包: 长度(4byte)方法(1byte)数据json ● 数据处理: 单线程map读写 ○ 依次处理待处理队列的请求(chan)…...

编程日记 2024/12/8 14:43:27

QT QTableWidget::setModel”: 无法访问 private成员

//严重性代码说明项目文件行禁止显示状态 //错误C2248 “QTableWidget::setModel”: 无法访问 private 成员(在“QTableWidget”类中声明) QSqlQueryModel* sql_model; ui.tableView_database->setModel(sql_model); //ok ui.tableWidget_database->setModel(sql_model)…...

编程日记 2024/12/8 14:41:25

STM32:Bootloader(AB备份，自动回滚)

目录 1.STM32的升级方式2.IAP升级3.代码逻辑展示3.1 划分存储区域3.2 IAP的状态4.源码分析4.1 记录IAP的状态4.2 APP代码异常判断4.3 IAP状态的切换以及异常的处理逻辑4.4 完整的逻辑代码1.STM32的升级方式 1、ICP：In Circuit Programing，简单说就是在单片机开发时使用烧录器…...

编程日记 2024/12/8 14:39:22

数独小游戏（Matlab）

基于Matlab制作的数独小游戏 &#xff08;完整源码和介绍&#xff09; 感兴趣可以随时联系博主噢~常在线能秒回&#xff01; “Matlab数独小游戏”程序设计的关键技术流程和核心算法如下&#xff1a; 1.图形用户界面(GUI):使用MATLAB的GUIDE工具创建和管理用户界面&#xff0…...

编程日记 2024/12/8 14:38:21

使用docker让项目持续开发和部署

大多人选择开发时在本地&#xff0c;部署时文件都在容器里&#xff0c;如果没有容器&#xff0c;那就本地开发&#xff0c;没有映射文件&#xff0c;如果部署环境到容器了&#xff0c;容器内部启动时设置执行命令&#xff0c;再将映射的文件进行编译&#xff0c;这就直接能实现…...

编程日记 2024/12/8 14:36:17

电子应用设计方案-45：智能火锅系统方案设计

智能火锅系统方案设计 一、引言 随着人们生活水平的提高和对饮食体验的追求&#xff0c;智能火锅系统应运而生。本方案旨在设计一款集智能化控制、高效加热、安全保障和个性化体验于一体的智能火锅系统。 二、系统概述 1. 系统目标 - 实现精准的温度控制&#xff0c;满足不同…...

编程日记 2024/12/8 14:34:13

windows在conda下安装nlpia库

最近在学习《自然语言处理实战》这本书&#xff0c;书中用了其自己的库nlpia&#xff0c;我一直装不上&#xff0c;网上也找不到教程遂放弃&#xff0c;看到现在第四章没办法了&#xff0c;需要用到库里的一些文本语料&#xff0c;又折腾了一天&#xff0c;终于装好了&#xff…...

编程日记 2024/12/8 14:32:10

分布式事务的前世今生-纯理论

一个可用的复杂的系统总是从可用的简单系统进化而来。反过来这句话也正确: 从零开始设计的复杂的系统从来都用不了&#xff0c;也没办法让它变的可用。 --John Gal 《系统学》 1975 1. 事务的概念 百科&#xff1a; 事务&#xff08;Transaction&#xff09;&#xff0c;一般是…...

编程日记 2024/12/8 14:31:08

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/23 17:54:24

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/12/19 10:39:38

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/12/8 23:53:16

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/12/18 23:10:57

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/12/23 13:27:38

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/12/24 20:36:48

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/12/21 16:14:01

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34