如何使用Fetch调用后端API获取翻译结果并确定正确接口端点

1. 第一步：配置后端路由暴露翻译接口 #

你需要先在Ruby后端服务中，为翻译功能新增可访问的HTTP接口端点：

• 如果你使用Rails框架，在config/routes.rb中添加路由规则示例：

# 推荐用POST接口，避免待翻译文本长度超出GET请求的长度限制
post '/api/tickets/translate', to: 'tickets#translate'

• 在对应的控制器（比如上述示例的TicketsController）中编写接口逻辑，调用你已经写好的make_request方法，返回JSON格式响应：

class TicketsController < ApplicationController
  # 开发环境可引入rack-cors gem配置跨域，允许前端域名访问接口
  def translate
    @final_ticket = params[:ticket_content] # 接收前端传递的待翻译内容
    translated_text = make_request # 调用已实现的翻译逻辑
    render json: { translated_text: translated_text }
  end

  # 原有make_request方法可优化解析逻辑，DeepL返回为JSON格式无需手动拆分字符串
  def make_request
    response = Faraday.post('https://api.deepl.com/v2/translate') do |req|
      req.params[:auth_key] = 'authkeyhere'
      req.params[:text] = @final_ticket
      req.params[:target_lang] = 'DE'
      req.params[:source_lang] = 'EN'
    end
    if response.success?
      result = JSON.parse(response.body)
      return result['translations'][0]['text']
    else
      raise InvalidResponseError
    end
  end
end

2. 第二步：前端填写对应接口端点 #

接口地址填写规则：

• 前后端部署在同域名下时，直接填写配置的路由路径即可
• 前后端跨域时（比如开发阶段前端跑在8080端口、后端跑在3000端口），填写完整的后端服务地址+路由路径

修正后的Messages.vue代码示例：

methods: {
  loadTranslations() {
    // 示例：开发环境后端地址为http://localhost:3000，填完整接口地址即可
    fetch('http://localhost:3000/api/tickets/translate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      // 传递待翻译内容给后端
      body: JSON.stringify({ ticket_content: '此处传入需要翻译的文本' })
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      // 拿到翻译结果后可存到组件data中，渲染到页面展示
      console.log(myJson.translated_text)
    });
  },
}

额外注意事项 #

• 开发环境必须配置CORS规则，否则前端请求会被浏览器同源策略拦截
• 不要把DeepL密钥直接暴露在前端代码中，你当前放在后端调用的逻辑是安全的，不需要调整

内容的提问来源于stack exchange，提问作者user16741832