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

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

news 2025/7/7 0:18:16

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

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

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/7/6 9:57:48

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/7/5 10:32:33

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/4 15:52:31

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/7/6 9:34:25

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/7/5 15:39:29

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/6/16 10:20:03

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/6/22 13:19:03

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/6/15 16:44:42