• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
Naix1573
帮助1

前言
跨域,一句话介绍:
你要请求的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注解的属性才能自定映射到值

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhfkbceb
系列文章
更多 icon
同类精品
更多 icon
继续加载