node.js express cors解决跨域

目录

什么是跨域

示例

postman请求

前端请求

cors中间件解决跨域

流程

配置cors参数


什么是跨域

跨域(Cross-Origin)是指在 Web 开发中,当一个网页的源(Origin)与另一个网页的源不同时,就发生了跨域。同源策略(Same-Origin Policy)是浏览器的一项安全策略,限制了一个源下的文档或脚本如何能与另一个源下的资源进行交互。

同源是指两个 URL 具有相同的协议(http/https)、主机(domain)和端口(port)。如果这两个URL的这三个部分中任何一个不同,就被认为是不同源即跨域。

示例

开启一个node服务,服务地址为http://127.0.0.1:3000

postman请求

postman对服务发起post登录请求

请求成功。postman不受跨域影响,原因主要是因为postman是一个独立的桌面应用程序,而不是运行在浏览器中的 Web 应用。

前端请求

开启一个前端项目服务,比如vue

发起登录请求

<script setup>import axios from 'axios'const authLogin = async () => {try {const { data } = await axios.post('http://127.0.0.1:3000/api/v1/users/login', {"email": "adasdasasda1@qq.com","password": "pass1234"})} catch (error) {throw new Error(error)}}
</script><template><main><button @click="authLogin">sign</button></main>
</template>

浏览器跨域报错

cors中间件解决跨域

流程

1、安装cors依赖

npm i cors

2、引入依赖

const cors = require('cors');

3、注册中间件

全局注册cors中间件

app.use(cors());

 或为某个路由注册cors中间件

router.post('/path', cors(), controller);

vue服务进行post请求

请求成功,看到响应头Access-Control-Allow-Origin为*, 为cors的默认设置

配置cors参数

const corsOptions = {origin: 'http://192.168.110.61:5173',//...
};app.use(cors(corsOptions));

origin: 允许访问资源的特定源

通过查阅github文档查看其他配置

GitHub - expressjs/cors: Node.js CORS middleware

用cors中间件配置同以下

app.all("*", (req, res, next) => {//设置允许跨域的域名,*代表允许任意域名跨域res.header("Access-Control-Allow-Origin", "http://192.168.110.61:5173");
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手把手教你反编译小程序

本次实验环境 操作系统: win10 10.0.19042 node: v14.17.0 微信开发者工具: Stable 1.05.2110290 前期准备 在电脑端安装模拟器工具&#xff0c;这里以夜神模拟器为例&#xff0c; 在模拟器中安装微信&#xff1a;用于微信打开小程序时加载小程序包。在模拟器中文件管理器&…

论文笔记:A review on multi-label learning

一、介绍 传统的监督学习是单标签学习&#xff0c;但是现实中一个实例可能对应多个标签。这篇文章介绍了多标签分类的定义和评价指标、多标签学习的算法还有其他相关的任务。 二、问题相关定义 2.1 多标签学习任务 假设 X R d X R^d XRd&#xff0c;表示d维的输入空间&am…

日本服务器:确保其稳定性的几个要点

​  在租用日本服务器时&#xff0c;用户们大多一定会关注它的稳定性&#xff0c;其实这些顾及都是正常的。毕竟&#xff0c;网站要想正常运行&#xff0c;保障服务器稳定是关键。本文将讨论有关如何保障日本服务器稳定性的一些有用技巧&#xff0c;希望对您有所帮助。 1.注重…

SpringBoot 启动加载器解析

计时器介绍 启动加载器实战 实现方式1 实现CommandLineRunner接口重写run方法通过Order进行排序 示例: Component Order(1) public class FirstCommandlineRunner implements CommandLineRunner {Overridepublic void run(String... args) throws Exception {System.out.pr…

一篇上手机器学习

一、上手机器学习的几个阶段 上手机器学习&#xff0c;第一步当然是看完我的这篇文章啦~&#xff0c;然后就按以下步骤来就可以了&#xff1a; 学习Python编程语言&#xff1a;Python是一种易于学习的高级编程语言&#xff0c;广泛应用于机器学习领域。你可以通过学习Python的…

第三节、项目支付功能实战-微信支付平台接入流程,小程序账号注册、商户注册

简介 本篇介绍小程序的注册流程、商户平台的注册流程、以及小程序和商户平台如何进行绑定。 微信小程序注册 由于项目中使用了小程序进行支付&#xff0c;所以首先来注册小程序。小程序注册网站如下&#xff1a;小程序注册地址 小程序账号注册 1、链接页面点击“前往注册”…

carla安装中的问题

1、carla carla安装完后&#xff0c;需要使用python调用API去更换地图&#xff0c;增加车辆等 使用Python调用API过程中可能会报错&#xff1a; 报错1&#xff1a;carla API&#xff08;Carla包&#xff09;版本不对 **解决方法&#xff1a;**需要将这个目录下的三个文件拷…

数学建模算法

算法部分 1. 评价类模型2. TOPSIS3. 线性规划4. 聚类分析5. 预测模型6. 拉伊达准则(对异常值进行剔除)7. 数据拟合8. 图论代码练习1. 模拟圆周率2. 斐波那契数列3. 四只鸭子落在一个圆中概率4. 方程2: y" uy y,初值y(0) 1,y(0) 0 算法讲解 matlab代码大全 1. 评价类模型…

【Python】修改pip 默认安装位置

使用pip安装的时候&#xff0c;一般是默认安装在c盘里的。这样做很容易会让c盘的文件堆满。那么如何让pip安装的包放入d盘呢&#xff1f; 查看pip默认安装的位置 在cmd里输入python -m site&#xff0c;这里可以看到&#xff0c;安装包会默认下载到c盘中 从这里可以看到&am…

【Spring教程15】Spring框架实战:详解解读AOP的工作流程和AOP的核心概念

目录 1 AOP工作流程2 AOP核心概念 欢迎大家回到《 Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0c;如果您对Maven还很陌生&#xff0c;请移步本人的博文《 如何在windows11下安装Maven并配置以及 IDEA配置Maven环境》&#xff0c;本文…

如何使用cpolar+Inis在Ubuntu系统快速搭建本地博客网站公网可访问

文章目录 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总…

AspNetCore 中使用 Knife4jUI 更加友好的Swagger界面

&#x1f680;介绍 aspnetcore.knife4j是一个基于.NET Core平台的Swagger UI库&#xff0c;它提供了API文档的生成和管理功能。这个库的前身是swagger-bootstrap-ui&#xff0c;在Java项目中广泛使用&#xff0c;由于其优秀的界面和易用性被许多开发者所推崇。现在&#xff0c…

LV.13 D2 开发板启动流程 学习笔记

一、开发板启动过程 EMMC&#xff1a;相当于电脑的外存&#xff0c;断电不丢失 开发板上电后首先运行SOC内部iROM中固化的代码(BL0)&#xff0c;这段代码先对基本的软硬件环境(时钟等...)进行初始化&#xff0c;然后再检测拨码开关位置获取启动方式&#xff0c;然后再将对应存储…

基于SSM+MySQL学生宿舍管理系统的设计与实现(源码+数据库+文档)

摘 要 近年来&#xff0c;随着计算机技术的不断发展和运用&#xff0c;许多实际问题都得到了较好地解决。随着现代社会对企业经营的需求日益增长&#xff0c;企业的无纸办公也逐渐得到了推广。本学生宿舍管理系统的设计开发&#xff0c;目标就是解决宿舍管理复杂的人为管理&a…

[23] Self-conditioned Image Generation via Generating Representations

[paper | code] 用生成对象本身作为控制信号&#xff0c;实现无条件图像生成。训练阶段。Step1&#xff1a;用预训练模型&#xff08;例如&#xff1a;Moco v3&#xff09;提取生成对象的特征编码&#xff1b;Step2&#xff1a;基于特征编码&#xff0c;训练一个扩散模型RDM&a…

pycharm手动安装包

1.下载对应的包 TTS PyPI 2.手动解压&#xff0c;找到文件放到pycharm对应项目的lib文件夹中 以TTS包为例&#xff0c;找到下载并解压的包中的2个文件&#xff0c;一个名称一个info结尾 3.放到项目的lib文件夹中 eg&#xff1a;路径&#xff1b;C:\doc\myProject\speaker\venv…

Android View的 getHeight 和 getMeasuredHeight 的区别

前言 先简单复习一下Android View 的 绘制顺序&#xff1a; 1、onMeasure&#xff08;测量&#xff09;&#xff0c;先根据构造器传进来的LayoutParams&#xff08;布局参数&#xff09;&#xff0c;测量view宽高。 2、onLayout&#xff08;布局&#xff09;&#xff0c;再根…

SQL进阶 | 自连接

概述 SQL的自连接是指在一个SQL表中&#xff0c;使用自身表格中的实例进行联接并查询的操作。自连接通常使用别名来标识一个表格&#xff0c;在自连接中&#xff0c;表格被视为两个不同的表格&#xff0c;并分别用不同的别名来标识。然后&#xff0c;在WHERE子句中使用这些别名…

二十、FreeRTOS之Tickless低功耗模式

本节需要掌握以下内容&#xff1a; 1&#xff0c;低功耗模式简介&#xff08;了解&#xff09; 2&#xff0c; Tickless模式详解&#xff08;熟悉&#xff09; 3&#xff0c; Tickless模式相关配置项&#xff08;掌握&#xff09; 4&#xff0c;Tickless低功耗模式实验&…

自定义异步任务管理器和线程

import com.lancoo.common.utils.Threads; import com.lancoo.common.utils.spring.SpringUtils;import java.util.TimerTask; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit;/*** 异步任务管理器* * author lancoo*/ public c…