uni实现百度OCR文字识别及跨域问题解决

1、官网相关资料的申请

百度智能云官网找到对应产品，点击进入，点击技术文档；参照新手操作指南流程进行应用创建；

2、接口的调用

官网应用文档列表有API文档介绍，根据你的需求调用对应接口即可；下面以通用文字识别——数字识别为例；

第一步：获取Access token；
Access token默认有效期为30天；返回数据参数expires_in为有效期（单位秒）；
第二步：根据Access token调取对应接口，示例中接口为官网中：通用文字失败——数字识别接口；
备注：示例中URL根据APP和H5设置不同url是因为h5中调用百度接口出现跨域问题；此示例为调试测试，采用的为webpack-dev-server解决跨域，正式项目可自行测试调试，参考官网中的部署时配置；

<template>
</template>
<script>
	export default {
		data() {
			return {
				title: '',
				accessToken: null,
			}
		},
		mounted(){
			console.log('mounted');
			if( uni.getStorageSync('BDaccessToken') ){
				let countDoneTime = uni.getStorageSync('tokenTime');//token过期时间，秒
				let getTokenTime = uni.getStorageSync('tokenGetTime');//token获取时间，毫秒
				let differTime = new Date().getTime()-getTokenTime;
				if( differTime > countDoneTime*1000 ){
					/*token过期*/
					uni.removeStorageSync('BDaccessToken');
					uni.removeStorageSync('tokenTime');
					uni.removeStorageSync('tokenGetTime');
					this.getBDOCRtoken();
				}else{
					this.accessToken = uni.getStorageSync('BDaccessToken');
				}
			}else{
				/*首次进入，无token*/
				this.getBDOCRtoken();
			}
		},
		methods: {
			/*获取accessToken，存储过期时间*/
			getBDOCRtoken(){
				uni.setStorageSync('tokenGetTime',new Date().getTime());
				let params={
					'grant_type':'client_credentials',
					"client_id": "API key",
					"client_secret": "Secret Key"
				}
				let url = ''
				// #ifdef APP-PLUS
				url = 'https://aip.baidubce.com/oauth/2.0/token'
				// #endif
				// #ifdef H5
				url = '/baiduApi/oauth/2.0/token'
				// #endif
				uni.request({
					url: url,
					method:'POST',
					data: params,
					header:{
						'Content-type': 'application/x-www-form-urlencoded',
						'Accept': 'application/json'
					},
					success: (res)=>{
						console.log('res',res);
						uni.setStorageSync('BDaccessToken', res.data.access_token);
						this.accessToken = res.data.access_token;
						uni.setStorageSync('tokenTime',res.data.expires_in);
					},
					fail: (err)=>{
						console.log('err',err);
					}
				})
			},
			/*上传图片*/
			scanTextHandle(){
				let url;
				// #ifdef APP-PLUS
				url = 'https://aip.baidubce.com/rest/2.0/ocr/v1/numbers'
				// #endif
				// #ifdef H5
				url = '/baiduApi/rest/2.0/ocr/v1/numbers'
				// #endif
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					// sourceType:['camera'],
					success: (res)=>{
						this.toBase64Handle(res.tempFilePaths[0]).then(res=>{
							console.log('成功');
							uni.request({
								url: url,
								method:'POST',
								data: {
									'access_token': this.accessToken,
									image: res
								},
								header:{
									'Content-type': 'application/x-www-form-urlencoded'
								},
								success: (res)=>{
									console.log('res',res);
									if( res.data.words_result_num>0 ){
										this.title = res.data.words_result[0].words;
									}else{
										this.title = '';
										uni.showToast({
											title:'未获取到数字',
											duration:1500
										})
									}
								},
								fail: (err)=>{
									console.log('err',err);
								}
							})
						}).catch(err=>{
							console.log('失败',err);
						})
					},
					fail: (err)=>{
						console.log('失败',err);
					}
				})
			},
			/*图片转base64格式*/
			toBase64Handle(path){
				return new Promise((resolve, reject) => {
					// #ifdef APP-PLUS
					plus.io.resolveLocalFileSystemURL(path, (entry)=>{
						entry.file((file)=>{
							let fileReader = new plus.io.FileReader()
							fileReader.readAsDataURL(file)
							fileReader.onloadend = (evt) => {
								let base64 = evt.target.result.split(",")[1]
								resolve(base64)
							}
						})
					},err=>{
						reject(err);
					})
					// #endif
					// #ifdef H5
					uni.request({
						url: path,
						responseType: 'arraybuffer',
						success: (res) => {
							resolve(uni.arrayBufferToBase64(res.data))
						},
						fail: (err) => {
							reject(err);
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.getFileSystemManager().readFile({
						filePath: path,
						encoding: 'base64',
						success: (res) => {
							resolve(res.data)
						}
					})
					// #endif
				})
			},
		}
	}
</script>

3、uni中跨域问题的解决

针对跨域官网中给出了详细解答；

1、部署时：

方案一：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上；
方案二：由后台服务器配置策略，设为允许跨域访问；

2、调试时：

方案一：使用内置浏览器；
方案二：配置webpack-dev-server代理；
方案三：给浏览器安装跨域插件，禁止浏览器报跨域；Chrome插件名称：Allow-Control-Allow-Origin: *

3、webpack-dev-server配置跨域代码参考

根据官方文档的描述，devServer配置被要求在manifest.json去配置；

"h5" : {
	"devServer": {
		"port": 8080, //端口号
		"disableHostCheck": true,
		"proxy": {
			"/baiduApi":{
				"target": "https://aip.baidubce.com",
				"changeOrigin": true, //是否跨域
				"secure": false, // 设置支持https协议的代理
				"pathRewrite": {
					"^/baiduApi": ""
				}
			}
		}
	}
}