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. .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 = ";;
  const data = await axios.post(url, querystring.stringify(options)).then(r => r);
  console.log(data);
}

VM3451:1 POST  403

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

I also tried the GET method for "; but got the same result.

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

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

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./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./v2/translate";
  const data = await axios.post(url, querystring.stringify(options)).then(r => r);
  console.log(data);
}

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

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

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

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

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

• javascript
• reactjs
• deepl

• 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. User-Agent: YourApp Accept: / Content-Length: [length] Content-Type: application/x-www-form-urlencoded auth_key=myapikey&text=Hello, world&target_lang=DE – Yoshi Commented Sep 17, 2021 at 4:09
• By any chance, were you able to find a solution to this? – Taku Commented Oct 9, 2021 at 7:18

3 Answers 3

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.

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.

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./v2/translate", {
  params: {
    auth_key: x,
    text: y,
    target_lang: z
  },
  proxy: {
    host: "localhost",
    port: 8080
  }
});

return response; };