JavaScript调用DeepL API如何设置origin解决CORS导致的403报错

根本原因 #

DeepL API 官方从服务端层面禁止了浏览器端直接发起跨域请求，这是固定的安全策略，目的是避免开发者将认证密钥直接暴露在前端代码中引发密钥泄露、额度被盗刷的风险。你遇到的403报错和参数格式、站点是否HTTPS无关，所有前端直接调用DeepL API的请求都会被拦截。

可尝试的解决方案 #

• 方案1：新增后端代理层（最推荐，适用于生产环境）
  不要在前端直接调用DeepL API，改为前端先请求你自己的后端接口，由后端服务转发请求到DeepL API，既可以绕开CORS限制，也能保护你的认证密钥不被泄露。
  本地开发阶段如果用Vite搭建的React项目，可以直接在vite.config.ts中添加代理配置临时测试：

  export default defineConfig({
    server: {
      proxy: {
        '/deepl': {
          target: 'https://api-free.deepl.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/deepl/, '')
        }
      }
    }
  })
  

  前端调用时修改请求地址为：

  const url = "/deepl/v2/translate";
  

  生产环境可以用Nginx配置反向代理，或者在你的后端服务中添加转发逻辑，以下是Node.js端简单的转发示例：

  // 后端接口逻辑示例
  const axios = require('axios')
  app.post('/api/translate', async (req, res) => {
    const { text, target_lang } = req.body
    const result = await axios.post('https://api-free.deepl.com/v2/translate', {
      auth_key: process.env.DEEPL_AUTH_KEY, // 密钥放在后端环境变量，不会泄露
      text,
      target_lang
    })
    res.send(result.data)
  })
  

• 方案2：使用Serverless/边缘函数转发
  如果你没有自己的后端服务，可以用Vercel Functions、Netlify Functions、云厂商的云函数等无服务资源部署转发逻辑，前端调用云函数地址即可，原理和后端代理一致，成本更低。

• 方案3：本地临时禁用浏览器安全策略（仅适用于本地测试）
  如果只是本地测试功能，可以临时关闭Chrome浏览器的跨域安全限制，步骤如下：

  1. 关闭所有已经打开的Chrome窗口
  2. 右键Chrome快捷方式，选择「属性」
  3. 在「目标」输入框的内容末尾添加 --disable-web-security --user-data-dir="C:\ChromeDevTemp"（注意前面有个空格）
  4. 打开这个修改后的快捷方式启动浏览器，再访问本地项目即可正常调用，该方案仅用于临时测试，绝对不能用于生产环境。

注意事项 #

绝对不要将DeepL的auth_key硬编码或者放在前端环境变量中，前端的所有代码对用户都是可见的，任何人都可以轻松拿到你的密钥，盗刷你的调用额度甚至导致账号被封禁。

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