详解React Native 采用Fetch方式发送跨域POST请求
Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch。下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些。客户端环境用的是RN写的一个页面,也可以用浏览器的console控制台模拟。后端服务用的是NodeJs express框架。
1)Fetch请求
//发送Ajax请求 sendAjax(){ //POST方式,IP为本机IP fetch("http://192.168.111.102:8085", { method: "POST", mode: "cors", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: 'key=1' }).then(function (res) { console.log("fetch request ", JSON.stringify(res.ok)); if(res.ok){ res.json().then(function (json) { console.info(json); Alert.alert('提示','来自后台数据:名字'+json.name+'、年龄'+json.age,[{text: '确定', onPress: () => console.log('OK Pressed!')},]); }); }else{ Alert.alert('提示','请求失败',[{text: '确定', onPress: () => console.log('OK Pressed!')},]); } }).catch(function (e) { console.log("fetch fail"); Alert.alert('提示','系统错误',[{text: '确定', onPress: () => console.log('OK Pressed!')},]); }); }
1、mode属性控制是否允许跨域。same-origin(同源请求)、no-cors(默认)和cros(允许跨域请求),第一种跨域求情会报error,第二种可以请求其他域的脚本、图片和其他资源,但是不能访问response里面的属性,第三种可以获取第三方数据,前提是所访问的服务允许跨域访问。否则,会出现如下错误:
2、Fetch请求后台时,返回时一个Promise对象。对象支持解析返回数据的方法有:arrayBuffer()、blob()、formData()、json()、text()。
3、Body传入参数,注意!注意!注意!重要的事情说三次,只能传啊a=1&b=2...这种参数形式,不可传对象{a:1,b:2,...},用JSON.stringify({a:1,b:2,...})也不行。在jquery中,传入对象框架会自动封装成formData的形式,fetch没有这个功能。
4、使用时请注意浏览器版本,低版本不支持此对象。RN是可以用的
2)Nodejs express框架开启允许跨域请求:
//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); next(); });
3)Nodejs express框架开启处理POST数据功能,默认POST请求的参数是在请求体里面,用res.query是获取不到的,为{};需要使用res.body获取,前提是要在express框架里面开启body解析功能,否则显示undefined。
var express = require('express'); //Post方式请求参数放在请求体里面,需引用body-parser解析body var bodyParser = require("body-parser"); var app = express(); // 引用 app.use(bodyParser.urlencoded({ extended: false }));
4)支持jsonp方式跨域访问,开启跨域访问后用传统的jsonp方式请求时,会报错。因为jsonp请求需要返回一个callback包裹的数据,否则解析出错。此处有一个坑,用$.ajax({method:'POST',dataType:'jsonp'})方式请求时,依然发送的是GET请求。
//json数据 var data = { "name": "Test", "age": "19" }; app.get('/', function(req, res) { console.log('get..........'); console.log(req.query); if (req.query && req.query.callback) { var str = req.query.callback + "(" + JSON.stringify(data) + ")"; //jsonp console.log('jsonp: '+str); res.end(str); }else{ console.log('json: '+JSON.stringify(data)); res.end(JSON.stringify(data)); } });
5)完整代码:
1、RN前端
/** * Created by linyufeng on 2016/8/22. */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, TouchableHighlight, Alert, View } from 'react-native'; class HelloWorld extends Component { //发送Ajax请求 sendAjax(){ //POST方式 fetch("http://192.168.111.102:8085", { method: "POST", mode: "cors", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: 'key=1' }).then(function (res) { console.log("fetch request ", JSON.stringify(res.ok)); if(res.ok){ res.json().then(function (json) { console.info(json); Alert.alert('提示','来自后台数据:名字'+json.name+'、年龄'+json.age,[{text: '确定', onPress: () => console.log('OK Pressed!')},]); }); }else{ Alert.alert('提示','请求失败',[{text: '确定', onPress: () => console.log('OK Pressed!')},]); } }).catch(function (e) { console.log("fetch fail"); Alert.alert('提示','系统错误',[{text: '确定', onPress: () => console.log('OK Pressed!')},]); }); } render() { return ( <View style={styles.container}> <TouchableHighlight style={styles.wrapper} onPress={this.sendAjax}> <View style={styles.button}> <Text>点击发送Ajax请求</Text> </View> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, wrapper: { borderRadius: 5, marginBottom: 5, }, button: { backgroundColor: '#eeeeee', padding: 10, }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
2、NodeJs
/** * Created by linyufeng on 2016/8/22. */ var express = require('express'); //Post方式请求参数放在请求体里面,需引用body-parser解析body var bodyParser = require("body-parser"); var app = express(); // 引用 app.use(bodyParser.urlencoded({ extended: false })); //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); next(); }); //json数据 var data = { "name": "Test", "age": "19" }; app.get('/', function(req, res) { console.log('get..........'); console.log(req.query); if (req.query && req.query.callback) { var str = req.query.callback + "(" + JSON.stringify(data) + ")"; //jsonp console.log('jsonp: '+str); res.end(str); }else{ console.log('json: '+JSON.stringify(data)); res.end(JSON.stringify(data)); } }); app.post('/', function(req, res) { console.log('post............'); console.log(req.body); console.log('json: '+JSON.stringify(data)); res.end(JSON.stringify(data)); }); app.listen(8085, function () { console.log('Listening on port 8085...'); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。