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

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

news 2025/9/16 0:50:52

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

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

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

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/12 22:07:56

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/8/29 21:22:21

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/9/9 10:10:40

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/9/1 20:02:32

ubuntu22.04有线网络无法连接，图标也没了

今天突然无法有线网络无法连接任何设备&#xff0c;并且图标都没了 错误案例 往上一顿搜索&#xff0c;试了很多博客都不行&#xff0c;比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动&#xff0c;重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...

编程新知 2025/9/2 16:50:30