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

前端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)配置用户邮箱(填自己的邮箱&#xff0…...

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、消息队列与分布式、网站优化相关&#xff0…...

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语句发过来&#xff0c…...

[深入理解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包。&#x1f61…...

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安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

React Native 导航系统实战(React Navigation)

导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来&#xf…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...

docker 部署发现spring.profiles.active 问题

报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...