3

What else should I try?

I'm currently sending a request to the DeepL API in axios, but I'm getting a 403 response due to a CORS issue.

And tried to set the option using querystring as shown here, but it didn't work. https://github.com/funkyremi/deepl/blob/master/index.ts Also, using the library at the URL above returns 403.

Furthermore, there is no origin setting in the account settings of DeepL.

I tried using 'Content-Type': 'application/x-www-form-urlencoded' for axios headers: {}, and I also tried setting options for params: { } and not using querystring, but they didn't work.

import axios from 'axios'
import querystring from 'querystring';

export const translateDeepL = async() => {
  const options = {
      "auth_key": process.env.DEEPL_AUTH_KEY,
      "text": 'everyday is birthday.',
      "target_lang": 'JA',
  };
  const url = "https://api-free.deepl.com/v2/translate";
  const data = await axios.post(url, querystring.stringify(options)).then(r => r);
  console.log(data);
}

VM3451:1 POST https://api-free.deepl.com/v2/translate 403

the request use https with ngrok did't work also.

I also tried the GET method for "https://api-free.deepl.com/v2/usage" but got the same result.

It is definitely api-free.deepl.com since I am using the free plan.

By the way, the above code is executed as a component in React.

Yoshi
  • 31
  • 2
  • This is an example of a re-quest from the official website. POST /v2/translate?auth_key=myapikey> HTTP/1.0 Host: api-free.deepl.com User-Agent: YourApp Accept: */* Content-Length: [length] Content-Type: application/x-www-form-urlencoded auth_key=myapikey&text=Hello, world&target_lang=DE – Yoshi Sep 17 '21 at 04:09
  • By any chance, were you able to find a solution to this? – Taku Oct 09 '21 at 07:18

3 Answers3

2

the DeepL API does not support being used directly from within browser-based apps. The API Key is not supposed to be shared publicly as well and should always be kept secret.

The best approach is to use a backend proxy for the API Calls.

Tim Cadenbach
  • 1,446
  • 1
  • 9
  • 21
1

You might be being blocked because of sending a request from http (your localhost) to https, try using the proxy axios config, like

const response = await axios
.get("https://api-free.deepl.com/v2/translate", {
  params: {
    auth_key: x,
    text: y,
    target_lang: z
  },
  proxy: {
    host: "localhost",
    port: 8080
  }
});

return response; };

J gbc
  • 11
  • 1
1

I was encountering this same issue and couldn't find an answer. This API just didn't seem to want to talk to me via a browser.

My 'solution' was to set up an API proxy in node.

It works fine fetching from a back-end + now I can add some rate limiting etc

C.J on coding garden can explain this way better than I ever can.

Nick
  • 11
  • 3