1 前端 Vue 发送请求
在 Vue 下使用 百度翻译 API
首先在 百度翻译开放平台 (baidu.com) 查看开发文档
这里使用 GET 方法发送请求：
需要用到的包：
MD5加密 -> md5 库
发送异步请求 -> axios
在 head 标签引入：
两个文本域负责翻译，分别双向绑定了 data
vue实例：
const app = new Vue({
el: '#app',
data: {
translate_text: '',
translated_text: ''
},
watch: {
translate_text(newVal) {
const salt = '123';
const sign = md5(appid + newVal + salt + key);
axios({
method: 'get',
// url: 'https://fanyi-api.baidu.com/api/trans/vip/translate',
url: 'http://localhost:4000/translate',
params: {
q: this.translate_text,
from: 'auto',
to: 'zh',
appid: appid,
salt: '123',
sign: sign
}
})
.then((response) => {
this.translated_text = response.data.trans_result[0].dst;
})
}
}
})在<script>还声明两个常量，分别是官方规定的 id 和密钥
按照官方接口文档，需要对字符串进行拼接，然后 MD5 加密，这里的随机数 salt，可以通过Math.random() 生成
最后 then()，拿到的 response 取data，然后根据文档
最终的翻译结果其实是 trans_result，这是一个 数组
需要取 [0]，拿到第一个 json对象，然后在这个json对象里面取 dst，即：
trans_result[0].dst
通过 watch 监视要翻译的文本 translate_text，当 translate_text 改变时，通过 axios 发送请求，这里注意，如果 url 写为官方的 API 地址，就会出现 CORS 问题
报错：
Access to XMLHttpRequest at 'https://fanyi-api.baidu.com/api/trans/vip/translate?q=&from=auto&to=zh&appid=20230911001813160&salt=123&sign=a0f6fb7bd48354a4e1dadb12cfb7f2af' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是由于 本机 与 目标服务器 之间存在 跨域，这样是拿不到翻译结果的
2 后端 Node.js 代理
在当前 vue 工程下，新建文件夹 proxy ，进入文件夹，终端输入
npm init -y
初始化一个 Node.js 项目
安装相应的包
npm install express axios md5新建一个 server.js 文件
const express = require('express');
const axios = require('axios');
const md5 = require('md5'); // MD5 加密
const cors = require('cors'); // 引入 cors 中间件
const app = express(); // 创建一个 express 应用实例
const port = 4000;
// 使用 cors 中间件允许所有来源的跨域请求
app.use(cors());
app.get('/translate', (req, res) => { // req 请求对象,res 响应对象
const { q, from, to } = req.query; // 解构赋值，从查询参数 ?q='apple'&from='auto'&to='zh' 获取响应的值，并赋值
const appid = '20230911001813160';
const key = 'ehE0iLOaoIOeW1K8jxQ3';
const salt = Math.random().toString(36).substr(2, 8);
const sign = md5(appid + q + salt + key);
axios.get('https://fanyi-api.baidu.com/api/trans/vip/translate', {
params: {
q,
from,
to,
appid,
salt,
sign
}
})
.then(response => {
res.json(response.data);
})
.catch(error => {
console.error('翻译请求失败:', error);
res.status(500).send('翻译失败');
});
});
// Express 中用于启动服务器的方法
// 监听指定的端口号，并启动服务器以处理来自该端口的请求
app.listen(port, () => {
console.log('代理服务器运行在 http://localhost:${port}');
});启动服务器：
node server.js
此时，在前端 axios 发送请求的 url，只需要填写代理服务器，然后通过代理服务器转发
url: 'http://localhost:4000/translate',
