解决 CORS 跨域资源共享（以百度翻译 API 为例）

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 问题

        CORS（跨域资源共享，Cross-Origin Resource Sharing） 是一种浏览器的安全机制，用于允许或限制从一个域（或端口）向另一个不同域（或端口）发起的 HTTP 请求。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

        Express 是一个基于 Node.js 的简洁而灵活的 Web 应用框架，它提供了一系列强大的特性用于开发 Web 应用和 API。Express 是 Node.js 中最流行的 Web 框架之一，非常适合快速构建轻量级的 Web 应用

新建一个 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',