|
1 | 1 | --- |
2 | | -title: "Node.js Proxy Server" |
3 | | -description: "A lightweight local proxy for the DeepL API that enables browser-based applications to bypass CORS restrictions." |
| 2 | +title: "Making API calls from client-side JavaScript" |
| 3 | +description: "Two lightweight local proxies that let you try the DeepL API directly from a website" |
4 | 4 | public: true |
5 | 5 | --- |
6 | 6 |
|
| 7 | +<Note> |
| 8 | +These proxies are intended for prototyping and frontend testing. For production environments, consider implementing your own backend service with additional security measures and rate limiting. |
| 9 | +</Note> |
| 10 | + |
| 11 | +## Rationale |
| 12 | + |
| 13 | +The DeepL API does not permit calls from client-side JavaScript - that is, from JavaScript running in a browser. This policy exists to keep your API key safe. When you place a call from your website directly to the DeepL API, that call needs to include your API key. Anyone using your website could look at the network calls or your code itself, find your API key, and use it themselves. |
| 14 | + |
| 15 | +For this and other security considerations, DeepL [does not enable the CORS headers](/docs/best-practices/cors-requests) you would need to call the API from a webpage hosted on your origin. The industry-standard approach is to call APIs like DeepL’s from a back-end service. DeepL enforces this best practice to keep your credentials secure. |
| 16 | + |
| 17 | +## When to use a quick proxy |
| 18 | + |
| 19 | +But what do you do if you want to use the API quickly, in a prototype, a demo, or a hackathon, where you need to get up and running fast? What if you don’t have easy access to a server? |
| 20 | + |
| 21 | +For such situations, here are two solutions. |
| 22 | + |
| 23 | +## Node.js Proxy Server |
| 24 | + |
7 | 25 | <Card title="GitHub - DeepLcom/deepl-api-nodejs-proxy" icon="github" horizontal href="https://github.com/DeepLcom/deepl-api-nodejs-proxy"> |
8 | 26 | DeepL API Node.js Proxy on GitHub |
9 | 27 | </Card> |
10 | 28 |
|
| 29 | +This full-featured proxy server supports all DeepL API endpoints, including text translation, document translation, and glossaries. Built with Node.js and Express with minimal dependencies, it handles CORS headers for you and keeps your API key secure. It even includes an interactive web demo for testing translations right in your browser. |
11 | 30 |
|
12 | | -## Overview |
| 31 | +This proxy includes an interactive setup wizard to get you started quickly. Clone the repo, run the setup, and start sending requests from your browser. Check out the [GitHub repository](https://github.com/DeepLcom/deepl-api-nodejs-proxy) for full setup instructions and Docker support. |
13 | 32 |
|
14 | | -This lightweight proxy server lets you call the DeepL API directly from browser-based applications. In simpler terms, it lets you make DeepL API calls from your client-side JavaScript without running into browser security restrictions. |
| 33 | +## Quick & dirty PHP proxy |
15 | 34 |
|
16 | | -Since the DeepL API doesn't allow direct browser requests (see [CORS requests documentation](/docs/best-practices/cors-requests)), this proxy handles CORS headers and keeps your API key secure. Perfect for hackathons, demos, and quick prototypes where you need to get up and running fast. |
| 35 | +If you’re just using our `/translate` endpoint and want an even quicker solution, or if you don’t use node.js, you could use the PHP code below to create an instant proxy server. If PHP is not already installed on your machine, you can download and install it at [php.net](https://www.php.net/downloads.php). |
17 | 36 |
|
18 | | -Built with Node.js and Express with minimal dependencies. Supports all DeepL API endpoints including text translation, document translation, and glossaries. Includes an interactive web demo for testing translations right in your browser. |
| 37 | +The PHP script takes the parameters in the query string and passes them into a `POST` request to `/translate`. It does not check that the parameters are valid and does not support any other endpoints, although you could modify it to do so. |
19 | 38 |
|
20 | | -<Note> |
21 | | -This proxy is intended for prototyping and frontend testing. For production environments, consider implementing your own backend service with additional security measures and rate limiting. |
22 | | -</Note> |
| 39 | +To use this while developing on your local machine: |
| 40 | + |
| 41 | +* replace `{your API key here}` with your actual API key |
| 42 | +* create a file in your favorite directory with the PHP code below |
| 43 | +* go to your terminal and visit that directory |
| 44 | +* type `php -S localhost:8000` |
| 45 | + |
| 46 | +Your JavaScript can then access the DeepL API at `http://localhost:8000/php-proxy.php`. For example, to send a translation request with `text` and `target_lang`: |
| 47 | + |
| 48 | +```javascript |
| 49 | +const url = `http://localhost:8000/deepl-proxy.php?text=${encodeURIComponent(text)}&target_lang=${encodeURIComponent(targetLang)}`; |
| 50 | +const response = await fetch(url); |
| 51 | +const result = await response.text(); |
| 52 | +``` |
| 53 | + |
| 54 | +Here is the PHP script: |
23 | 55 |
|
24 | | -## Quick Start |
| 56 | +```php |
| 57 | +<?php |
| 58 | +header('Content-Type: application/json'); |
| 59 | +header('Access-Control-Allow-Origin: *'); |
| 60 | + |
| 61 | +$apiKey = '{your API key here}'; |
| 62 | +$apiUrl = 'https://api.deepl.com/v2/translate'; |
| 63 | + |
| 64 | +$data = http_build_query($_GET); |
| 65 | + |
| 66 | +$context = stream_context_create([ |
| 67 | + 'http' => [ |
| 68 | + 'method' => 'POST', |
| 69 | + 'header' => "Authorization: DeepL-Auth-Key " . $apiKey . "\r\n" . |
| 70 | + "Content-Type: application/x-www-form-urlencoded\r\n", |
| 71 | + 'content' => $data |
| 72 | + ] |
| 73 | +]); |
| 74 | + |
| 75 | +echo file_get_contents($apiUrl, false, $context); |
| 76 | +?> |
| 77 | +``` |
25 | 78 |
|
26 | | -The proxy includes an interactive setup wizard to get you started quickly. Clone the repo, run the setup, and start sending requests from your browser. Check out the [GitHub repository](https://github.com/DeepLcom/deepl-api-nodejs-proxy) for full setup instructions and Docker support. |
27 | 79 |
|
28 | 80 | ## Screenshots |
29 | 81 |
|
30 | | -<Frame> |
| 82 | +### Node.js proxy |
| 83 | +<Frame caption="Node.js proxy server running in a terminal"> |
31 | 84 | <img src="https://raw.githubusercontent.com/DeepLcom/deepl-api-nodejs-proxy/main/assets/proxy-running.png" alt="Node.js proxy server running and ready to accept requests" /> |
32 | 85 | </Frame> |
33 | 86 |
|
34 | | -<Frame> |
| 87 | +<Frame caption="Interactive web demo interface for testing translations"> |
35 | 88 | <img src="https://raw.githubusercontent.com/DeepLcom/deepl-api-nodejs-proxy/main/assets/dashboard-demo.png" alt="Interactive web demo interface for testing translations" /> |
36 | 89 | </Frame> |
| 90 | + |
| 91 | +### PHP proxy |
| 92 | +<Frame caption='PHP proxy running in a terminal'> |
| 93 | +  |
| 94 | +</Frame> |
0 commit comments