Browser Support

[Sergei Basharov]

I'd like to consume Lokalise API endpoints from my browser client app

Additional context
I am working on a plugin for Figma which is basically going to run as a JavaScript code inside Chrome browser which is inside Electron app. Now I am trying to build a small PoC client app to run inside Chrome. I have problems with CORS - requests don't go through to Lokalise API from Chrome, but the same code runs find if I run it as a NodeJS app.

So, I wonder, if it's supposed to work in a similar way for both NodeJS and browser-based environments?

Here is my simple fetch example:

class LokaliseConnector {
    public async getProjects() {
        const result = await fetch(`https://api.lokalise.com/api2/projects/`,
            {
                headers: {
                    'x-api-token': 'abcdef'
                }
            }
        )
            .catch(console.error)
        console.log(result)
    }
}

Thank you!

[Elijah S. Krukowski]

Honestly, we were not testing it with browser environment and this was supposed to be Node client only. We'll have to discuss this with the team. Thank you for reaching us out!

[nickustinov]

Hi there!

Our API cannot be accessed from browser due to CORS restrictions, as some customers were implementing browser API calls for each of their website visitors, that is not acceptable and is stated in the API docs.

I understand why you'd need to do that, but seems there is no workaround but building a backend-type of proxy.

Good news is we are working on Figma plugin, it's coming in October/November.

[Sergei Basharov]

Hello @nickustinov, I bet it's not the right place to discuss the plugin you are planning to release for Figma, but is there a chance that you could reveal the scope of the plugin so that we in our company could plan our strategy for implementing connection between Figma and Lokalise better?

What is going to be supported in the plugin?

Thank you!

[nickustinov]

Sure! You'll be able to:

• Login to your Lokalise account
• Choose a project in Lokalise
• Switch between languages in Figma document
• Set key names for text elements
• Push strings with screenshots to Lokalise
• Pull translated strings back from Lokalise in any language

[Sergei Basharov]

Thank you Nick,
This list of features is very close to what we are developing now.

Let's see how it goes on your side!

[Oliver Lillie]

If anyone else ends up here for CORS issues and wants to use a simple node proxy to forward requests take a gander...

const express = require('express');
const { createProxyMiddleware, responseInterceptor } = require('http-proxy-middleware');
const dotenv = require('dotenv');
const path = require('path');
const cors = require('cors');
const bodyParser = require('body-parser');

dotenv.config({
    path: path.dirname(__dirname) + '/.env.development',
});

const app = express();

app.use(
    cors({
        origin: '*',
        optionsSuccessStatus: 200,
    }),
);

app.use(bodyParser.urlencoded({
    extended: false,
}));
app.use(bodyParser.json());

const apiServer = 'https://api.lokalise.com';
const apiKey = process.env.REACT_APP_LOKALISE_API_KEY;
const projectId = process.env.REACT_APP_LOKALISE_PROJECT_ID;
app.use(
    '/',
    createProxyMiddleware({
        target: `${apiServer}/api2/projects/${projectId}/`,
        secure: false,
        logLevel: 'debug',
        changeOrigin: true,
        selfHandleResponse: true,
        onProxyReq: (proxyReq, req, res) => {
            if (proxyReq.getHeader('origin')) {
                proxyReq.setHeader('origin', apiServer);
            }

            proxyReq.setHeader('X-API-Token', apiKey);
            proxyReq.setHeader('User-Agent', 'node-lokalise-api/6.1.0');
            proxyReq.setHeader('Accept-Encoding', 'identity');

            if (req.body) {
                const bodyData = JSON.stringify(req.body);
                console.log('[HPM] Sending', bodyData);
                proxyReq.setHeader('Content-Type', 'application/json');
                proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
                proxyReq.write(bodyData);
            }
        },
        onProxyRes: responseInterceptor(async (buffer, proxyRes, req, res) => {
            console.log(`[HPM] ${req.method} ${req.path} -> ${proxyRes.req.protocol}//${proxyRes.req.host}${proxyRes.req.path} [${proxyRes.statusCode}]`);

            const body = buffer.toString('utf-8');
            console.log('[HPM] Received', body);
            return body;
        }),
    }),
);


app.listen(3030);

With this you can forward all requests to http://localhost:3030/ and they will be forwarded to the correct API endpoint with no problems.