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

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

news 2026/2/8 12:17:53

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

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

<!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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/7 4:57:53

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/27 3:40:30

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03