前端jQuery ajax请求,后端node.js使用cors跨域

news2024/9/28 7:15:31

前言
跨域,一句话介绍:
你要请求的URL地址与当前的URL地址,协议不同、域名不同、端口不同时,就是跨域。
在这里插入图片描述
步入正题

前端,jQuery ajax请求

$.ajax({
	async: false,
	method: 'post',
	//URl和端口与后台匹配好,当前情况后端是本地,端口3000
	url: '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注解的属性才能自定映射到值

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

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

相关文章

点云分割预研

文章目录激光雷达点云分割1.点云分割主流方案(模型角度)1.1 (a) 基于RGB-D图像1.2 (d) 基于点云1.3 (b) 基于投影图像1.4 (b) 基于投影图像 - SqueezeSeg/RangeNet1.4. 球映射2 点云分割主流方案(部署角度)3 点云分割常用指标4 点…

MySQL 02 :三层结构、备份删除数据库

MySQL 02 :数据库三层结构-破除MySQL神秘 请添加图片描述 通过golang操作MySQL 创建删除数据库 备份恢复数据库 第一次需要配置环境,否则会报错 报错:mysqldump: Got error: 1045: Access denied for user ‘root’‘localhost’ (using …

HDLBits: 在线学习 SystemVerilog(二十三)-Problem 158-162(找BUG)

HDLBits: 在线学习 SystemVerilog(二十三)-Problem 158-162(找BUG)HDLBits 是一组小型电路设计习题集,使用 Verilog/SystemVerilog 硬件描述语言 (HDL) 练习数字硬件设计~网址如下:https://hdlbits.01xz.ne…

【LeetCode】《LeetCode 101》第二章:最易懂的贪心算法

文章目录2.1 算法解释2.2 分配问题455. 分发饼干 (简单)135. 分发糖果 (困难)2.3 区间问题435. 无重叠区间(中等)2.4 练习605. 种花问题(简单)452. 用最少数量的箭引爆气球&#xff…

FFmpeg介绍及入门知识

1、简介 FFmpeg是一套由c语言编写的,可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序,自身采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案,包含了非常先进的音频/视频编解码库libavcodec&#xf…

【Unity Android Platform:关于Android权限来源(安卓)如何查找】

Android权限来源 问题描述:当项目接入的插件逐渐变多,不仅仅是AndroidManifest会影响Android Permission的个数,甚至有些API也会影响最终的权限个数,例如下图所示: 当国内权限问题涉及到一些安全隐私问题时&#xff0…

构造函数与普通函数,显式原型与隐式原型,原型与原型链

原型与原型链1 学前先了解一些概念1.1 构造函数和普通函数的区别1.1.1 调用方式1.1.2 函数中this的指向不同1.1.3 写法不同1.2 问题明确2 原型与原型链2.1 原型2.2 显式原型与隐式原型2.3 原型链3 原型链环形结构1 学前先了解一些概念 1.1 构造函数和普通函数的区别 构造函数…

全流程基于最新导则下的生态环境影响评价技术方法及图件制作与案例

目录 专题一、生态环境影响评价框架及流程 专题二、基于遥感解译的土地利用现状图的编制 专题三、生物多样性测定及R语言分析 专题四、植被类型及植被覆盖度图的编制 专题五、生物量与净初级生产力测定:实测及模型 专题六、生态系统类型及服务价值评估 专题七…

MOT学习笔记 — 行人检测及行人跟踪数据集总结

1. 行人红外数据集总结 (1)OSU Thermal Pedestrian Database 下载链接:http://vcipl-okstate.org/pbvs/bench/Data/01/download.html (2)IRIS Thermal/Visible Face Database 下载链接:http://vcipl-o…

React 服务端渲染

React 服务器端渲染概念回顾什么是客户端渲染CSR(Client Side Rendering)服务器端只返回json数据,Data和Html的拼接在客户端进行(渲染)。什么是服务器端渲染SSR(Server Side Rendering)服务器端返回数据拼接过后的HTML,Data和Html…

Ubuntu20.04下安装vm17+win10/11

一、安装vmware17 1、官网下载 vmware官网:https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html 2、安装依赖 sudo apt update sudo apt install build-essential linux-headers-generic gcc make3、权限和安装 到下载的目录下…

vector你得知道的知识

vector的基本使用和模拟实现 一、std::vector基本介绍 1.1 常用接口说明 std::vector是STL中的一个动态数组容器,它可以自动调整大小,支持在数组末尾快速添加和删除元素,还支持随机访问元素。 以下是std::vector常用的接口及其说明&#xf…

品牌软文怎么写?教你几招

软文是什么?软文的本质就是广告,当然不是明晃晃的推销,而是自然隐晦地植入产品信息,引导更多用户自愿下单。 品牌软文对于写手的经验、内容的质量要求都相对较高,否则写出来的软文无法达到预期的效果。品牌软文怎么写…

一个古老的html后台的模板代码

效果图下: css部分代码:/* CSS Document / body{font-family:“宋体”, Arial,Verdana, sans-serif, Helvetica;font-size:12px;margin:0;background:#f4f5eb;color:#000;} dl,ul,li{list-style:none;} a img{border:0;} a{color:#000;} a:link,a:visit…

[css]通过网站实例学习以最简单的方式构造三元素布局

文章目录二元素布局纵向布局横向布局三元素布局b站直播布局实例左右-下 布局左-上下 布局上下-右 布局方案一方案二后言二元素布局 在学习三元素布局之前,让我们先简单了解一下只有两个元素的布局吧 两个元素的相对关系非常简单,不是上下就是左右 纵向布…

Anaconda配置Python科学计算库SciPy的方法

本文介绍在Anaconda环境中,安装Python语言SciPy模块的方法。 SciPy是基于Python的科学计算库,用于解决科学、工程和技术计算中的各种问题。它建立在NumPy库的基础之上,提供了大量高效、易于使用的功能,包括统计分析、信号处理、优…

用一个例子告诉你 怎样在spark中创建累加器

目录 1.说明 1.1 什么是累加器 1.2 累加器的功能 2. 使用累加器 3. 累加器和reduce、fold算子的区别 1.说明 1.1 什么是累加器 累加器是Spark提供的一个共享变量(Shared Variables) 默认情况下,如果Executor节点上使用到了Driver端定义的变量(通过算子传…

Redis常用命令及数据类型参数

1. 针对于string SET key value / GET key SET k1 v1 GET k1 // v1String是二进制安全的,是可变长度的, 底层类似于ArrayList 是可扩容的,最大存储内存为 512MB。 2. 判断key中是否存在某个内容 EXISTS key SET k1 v1 EXISTS k1 // …

Noah-MP陆面过程模型建模方法与站点、区域模拟

陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用 熟悉模型的发展历程,常见模型及各自特点; Noah-MP模型的原理 Noah-MP模型所需的系统环境与编译环境的搭建方法您都了解吗?? linux系统操作环境您熟悉吗&…

Linux驱动中的fasync(异步通知)和fsync

一、fsync用来同步设备的写入操作,考虑把一块设局写入到硬盘的操作,如果使用write函数,函数返回后只能保证数据被写入到驱动程序或者内核管理的数据缓存中,而无法保证数据被真正写入到硬盘的存储块里。但是fync可以做到这一点&…