前端jQuery ajax请求,后端node.js使用cors跨域
前言
跨域,一句话介绍:
你要请求的URL地址与当前的URL地址,协议不同、域名不同、端口不同时,就是跨域。

步入正题
前端,jQuery ajax请求
$.ajax({async: false,method: 'post',//URl和端口与后台匹配好,当前情况后端是本地,端口3000url: 'http://localhost:3000/api/getUserinfo',crossDomain: true,//这里的data是有两个参数,没有可以注释data: {access_token: accessToken,code: urlCode},success: function(response) { console.log(response);//后台返回的是json数据,通过response.参数名获取值//例如 var accessToken = response.access_token;},error: function(xhr, status, error) {alert(error);}
});
node.js后端,使用cors跨域
const express = require('express');
const cors = require('cors');
const axios = require('axios');
//前端无data参数的话,body-parser可以不引入
const bodyParser = require('body-parser');
const app = express();// 设置 cors 中间件
app.use(cors());//前端没无data参数的话,bodyParser的这两行可以忽略
//解析数据,建议这两行一起使用,除非你明确的知道只需要解析其中一种格式的请求体数据
//这一行代码是解析application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// 这一行代码是解析application/json
app.use(bodyParser.json())// 设置路由
app.post('/api/getuserinfo' ,(req, res) => {//获取前端的data参数,无data需要注释掉const accessToken = req.body.access_token;const code = req.body.code;axios({//这里可以写外部其他公司的接口url: 'https://www.weixin.qq.com/cgi-bin/user/getuserinfo',method: 'post',params: {access_token: accessToken,code: code},headers: {'Content-Type': 'application/json;charset=UTF-8'},responseType: 'json'}).then(response => {res.json(response.data);}).catch(error => {res.status(500).send(error.message);});
});// 启动服务,监听3000端口
const server = app.listen(3000, () => {console.log('Server started listening at http://localhost:3000');
})
如果req.body获取为{},请注意检查body-parser的引入和使用问题
//引入
const bodyParser = require('body-parser');
//设置
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
//获取参数值
const 参数值= req.body.参数名1;
bodyparser有以下几种常用解析方式:
(1)bodyParser.json(options)解析json格式
(2)bodyParser.urlencoded(options)解析文本格式
(3)bodyParser.raw(options)解析二进制
(4)bodyParser.text(options)解析文本格式(仅字符串)
可以结合上面的内容一起看。
其他补充:
Express的req.body返回为空的问题
Jquery的ajax默认的ContentType和数据格式
1.默认的ContentType的值为:application/x-www-form-urlencoded; charset=UTF-8
此格式为表单提交格式,数据为key1=value1&key2=value2的格式
2.虽然ajax的data属性值格式为:{key1:value1,key2:value2},但最后会转为key1=value1&key2=value2的格式提交到后台
3.如果ajax要和springmvc交互,key1=value1&key2=value2的格式,后台springmvc只需要定义对象或者参数就行了,会自动映射。
4.如果springmvc的参数有@RequestBody注解(接收json字符串格式数据),ajax必须将date属性值转为json字符串,不能为json对象(js对象,会自动转为key=value形式)。并且,修改contentType的值为:application/json; charset=UTF-8,这样加了@RequestBody注解的属性才能自定映射到值
相关文章:
前端jQuery ajax请求,后端node.js使用cors跨域
前言 跨域,一句话介绍: 你要请求的URL地址与当前的URL地址,协议不同、域名不同、端口不同时,就是跨域。 步入正题 前端,jQuery ajax请求 $.ajax({async: false,method: post,//URl和端口与后台匹配好,当…...
【最重要的 G 代码命令列表】
【最重要的 G 代码命令列表】1. 什么是G代码?2. 如何阅读G代码命令?3. 最重要/最常见的 G 代码命令3.1 G00 – 快速定位3.2 G01 – 线性插值3.3 G02 – 顺时针圆形插值3.4 G00、G01、G02 示例 – 手动 G 代码编程3.4 G03 – 逆时针圆形插补3.5 G20/ G21 …...
好用的公共DNS地址共享
公共DNS服务器地址大全 服务商云公共DNS服务器IP大全114DNS114.114.114.114114.114.115.115DNSPod DNS+119.29.29.29182.254.116.1162402:4e00::DNS 派 电信/移动/铁通101.226.4.6218.30.118.6DNS 派 联通123.125.81.6140.207.198.6cnnicDNS1.2.4.8210.2.4.82001:dc7:1000::1Go…...
C#:Krypton控件使用方法详解(第十三讲) ——kryptonDomainUpDown
今天介绍的Krypton控件中的kryptonDomainUpDown。下面介绍控件的外观属性和Item属性:Cursor属性:表示鼠标移动过该控件的时候,鼠标显示的形状。属性值如下图所示:Text属性:表示控件的显示文本内容,属性值为…...
Git设置SSH Key
一、git 配置 (1)打开 git 命令窗口 (2)配置用户名(填自己的姓名) git config --global user.name “xinyu.xia” (3)配置用户邮箱(填自己的邮箱࿰…...
WireShark如何抓包,各种协议(HTTP、ARP、ICMP)的过滤或分析,用WireShark实现TCP三次握手和四次挥手
WireShark一、开启WireShark的大门二、如何抓包 搜索关键字2.1 协议过滤2.2 IP过滤2.3 过滤端口2.4 过滤MAC地址2.5 过滤包长度2.6 HTTP模式过滤三、ARP协议分析四、WireShark之ICMP协议五、TCP三次握手与四次挥手5.1 TCP三次握手实验5.2 可视化看TCP三次握手5.3 TCP四次挥手5.…...
熬夜30天吃透这九大Java核心专题,我收割了3个大厂offer
这次一共收割了3个大厂offer,分别是蚂蚁金服、美团和网易,特意分享这次对我帮助非常大的宝典资料,一共涉及九大核心专题,分别是计算机网络、操作系统、MySQL、Linux、JAVA、JVM、Redis、消息队列与分布式、网站优化相关࿰…...
DMHS搭建DMDSC 2节点集群同步到单库
DMHS搭建DMDSC 2节点集群同步到单库环境介绍1 安装DMOCI1.1 关闭数据库实例服务1.2 将DMOCI 复制到源端与目的端的数据库bin目录1.3 对数据库bin 执行目录文件更改用户属组和权限2 启动源数据库服务并配置数据库实例参数2.1 使用DMCSSM启动集群实例2.2 DMDSC源其中一个节点执行…...
一条sql执行很慢可能的原因,如何优化
文章目录 sql怎么会变慢呢?1、大多数情况下很正常,偶尔很慢,则有如下原因2、这条 SQL 语句一直执行的很慢,则有如下原因:慢sql优化数据库中设置SQL慢查询分析慢查询日志慢sql如何让优化索引sql语句1、分页查询优化2、优化insert语句数据库结构优化优化器优化架构优化总结s…...
【设计模式】适配器模式和桥接模式
适配器模式 适配器模式 : 就是将一个类的接口变成客户端所期望的另一种接口,使得原本因为接口不匹配而无法一起工作的接口可以正常工作。属于结构型模式 比方说我有一个A牌子的奶瓶,然后买了个B牌子的奶嘴,不能匹配怎么办? 再买一个转换器…...
被隐藏的过程——预处理
文章目录0. 前言1. 程序的翻译环境和执行环境2. 被隐藏的过程2.1 翻译环境2.2 编译3.2.1 预编译3.2.2 编译2.2.3 汇编2.3 链接2.4 运行环境3. 预处理3.1 预定义符号3.2 #define3.2.1 #define定义标识符3.2.2 #define定义宏3.2.3 #define替换规则3.2.4 #和##3.2.5 带副作用的宏参…...
strace 用法介绍
strace 是什么 strace 是一个可用于诊断和调试的 Linux 用户空间跟踪器。我们用它来监控用户空间进程和内核的交互,比如系统调用、信号传递、进程状态变更等。 strace 作为一种动态跟踪工具,能够帮助我们高效地定位进程和服务故障。它像是一个侦探&…...
TiDB数据库架构概述
文章目录TiDB体系架构TiDB ServerStorage Cluster(存储引擎)PD cluster题目TiDB体系架构 TiDB Server Sql语句最先到达 TiDB Server集群 它是无状态的,数据并不是存储在这里面,当一个会话连接到TiDB Server集群上,sql语句发过来,…...
[深入理解SSD系列综述 闪存实战2.1.2] SLC、MLC、TLC、QLC、PLC NAND_固态硬盘闪存颗粒类型
闪存最小物理单位是 Cell, 一个Cell 是一个晶体管。 闪存是通过晶体管储存电子来表示信息的。在晶体管上加入了浮动栅贮存电子。数据是0或1取决于在硅底板上形成的浮动栅中是否有电子。有电子为0,无电子为1. SSD 根据闪存颗粒区分,固态硬盘有SLC、MLC、TLC、QLC、PLC 五种类型…...
游戏逆向之游戏技能分析
角色的当前技能列表往往都是从系统的技能库中进行筛选而组成的,而这个筛选的过程大多非常的复杂,经过的代码和临时结构体的传递也非常的多,所以在分析技能对象来源的时候常常要将OD和CE配合来使用。下面我们来分析下《天堂2》的技能列表。 首…...
汽车制造商与IT公司之间的技术合作案例
如果您对最新汽车技术感兴趣的话,您可能经常听到汽车制造商和IT公司正在合作开发技术的消息。汽车生产商为何自身不进行技术开发,而是与IT企业合作呢?因为最近随着以IT技术为基础的电动汽车等环保汽车或无人驾驶汽车等的登场和发展,汽车制造商单独进行技术开发需要花费很多时间…...
funkyheatmap | 用这个包来完美复刻Nature Biotechnology的高颜值神图吧!~
1写在前面 天气开始暖和了☀️,发现旅游的人好多啊!~🥲 不知道自己什么时候能有时间出去看看外面的世界,实在是太忙了。😷 最近用到的有个包感觉很不错,分享给大家,funkyheatmap包。ὡ…...
tomcat8调优
环境说明Jdk:1.8Tomcat: 8.5.69服务器 :2核 8G方案当调整Tomcat配置时,具体的配置方法可能会有所不同,因为它们受到许多因素的影响,例如Tomcat版本、操作系统、硬件配置等等。以下是每个建议的一些具体配置示例&#x…...
VS Code 解决 SpringBoot 项目启动时报 Failed to refresh live data from process **** 的问题
问题 SpringBoot 启动后 ,VS Code 报错 Failed to refresh live data from process ****。 现场是,SpringBoot 项目启动时,VS Code 将进行如下刷新,图片如下所示 当刷新 10 次以后,如果还是失败,则会抛出…...
[ 红队知识库 ] 各种重要文件路径
🍬 博主介绍 👨🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…...
盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)
名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 原创笔记:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 上一篇:《数据结构第4章 数组和广义表》…...
Python第七周作业
Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt,并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径,并创建logs目录(若不存在) 3.递归遍历目录data,输出所有.csv文件的路径…...
云原生时代的系统设计:架构转型的战略支点
📝个人主页🌹:一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、云原生的崛起:技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深,传统的 I…...
