百度通用文本翻译api使用

最新推荐文章于 2025-03-31 11:45:41 发布

mosen868

最新推荐文章于 2025-03-31 11:45:41 发布

阅读量4.5k

点赞数

分类专栏： Vue 文章标签： vue.js npm ajax

本文链接：https://blog.csdn.net/m0_47814717/article/details/132914750

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

百度翻译平台：http://api.fanyi.baidu.com/product/113

申请通用文本翻译api，需要先认证后才能申请接口使用，其中通用翻译API标准版免费调用量调整为5万字符/月，高级版免费调用量调整为100万字符/月，选择高级版就可以了免费使用。

申请完毕，右上角进入开发者信息栏目获取appid和密钥
在这里插入图片描述

如果害怕超过免费额度收费的情况，可以选择-我的服务-选中开通对应的翻译服务进行开启免费额度用量的提醒

在这里插入图片描述

进入接口使用操作阶段

通用翻译API HTTPS 地址：

https://fanyi-api.baidu.com/api/trans/vip/translate

必填参数：

在这里插入图片描述

其中sign字段的md5(appid+q+salt+密钥),其中salt随机数可以任意填写，sign字段的参数通过md5加密会生成32位的字符串。
其中，可使用 GET 或 POST 方式，如使用 POST 方式，Content-Type
必须为application/x-www-form-urlencoded，如涉及跨域问题，需要前端配置跨域处理，或在请求头设置Access-Control-Allow-Origin为*

headers:{
‘Access-Control-Allow-Origin’:‘*’,
‘Content-Type’:‘application/x-www-form-urlencoded’
}

完整代码：
（vue3+vite）index.vue

<template>
	<div>
		<button @click="translate">翻译</button>
	</div>
</template>

<script setup>
import { reactive } from 'vue'
import md5 from 'md5'//需要安装npm包：npm install md5
import axios from 'axios'//npm包：npm install axios
async function translate() {
    const keySercet = 'R**************T_'//自己的秘钥
    const signNature = reactive(
        {
            q: '香蕉',//翻译文本
            appid: '20**********70',//设置自己的appid
            salt: '12345678',//随机数任意填写
        })
    // 字符串1：appid+q+salt+密钥
    // sign:md5(字符串1) -32位
    const signData = signNature.appid + signNature.q + signNature.salt + keySercet
    // console.log(md5(signData));//
    // console.log(md5(signData).length);//32位
    const transData = {
        q: signNature.q,
        from: 'zh',
        to: 'en',
        appid: '20230915001817870',//appid
        salt: '12345678',//随机数
        sign: md5(signData)
    }
    axios({
        headers:{
		'Access-Control-Allow-Origin':'*',//允许跨域
        'Content-Type':'application/x-www-form-urlencoded'
    },
    //proxy代理，此处位百度翻译api接口,如果不涉及跨域问题和原本没有接入后端接口		   的，直接把此处的url换为百度翻译api接(https://fanyiapi.baidu.com/api/trans/vip/translate),不用配置和执行vite.config.js操作
        url: '/demo',
        method: 'post',
        data:transData
    }).then((res) => {
        console.log(res);
        console.log(res.data.trans_result[0].dst);
    })

}
</script>

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    proxy: { 
      '/demo': {
       target: "https://fanyi-api.baidu.com/api/trans/vip/translate",
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/demo/, '')
      }
    }
  }
})

在这里插入图片描述