Skip to main content

Proxy URLs

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

What is proxy URL​

Proxy URL is a concept through which extension developers can create a mapping between the application/website to the extension URL in which the actual extension is serving.

Scenario​

  1. When you want to hit the storefront APIs so the browser will not allow you to hit directly, the browser will thow a CORS error as the request origin is different, so what Proxy URL does is that it maps storefront URL to your extension URL so behind the scene there will be an alias of your extension URL to the storefront URL
  2. When you want to publish or inject any custom pages on the sales channel/website, and you want to implement your own functionality there, so what Proxy URL does it maps storefront URL to your extension URL so behind the scene there will be an alias of your extension URL to the storefront URL

How to create a proxy URL​

For creating a proxy URL, extension developers have to integrate the SDK method, in which they have to give the Extension API key, attached_path, and the extension launch URL

Sample Request

// Promise
const promise = client.application("<APPLICATION_ID>").partner.addProxyPath({  extensionId : value,
 body : {attached_path, proxy_url} });

// Async/Await
const data = await client.application("<APPLICATION_ID>").partner.addProxyPath({  extensionId : value,
 body : {attached_path, proxy_url} });

Sample Response

{
  "_id": "607406b8a472cd527303692f",
  "attached_path": "test",
  "proxy_url": "https://www.abc.com",
  "company_id": "1",
  "application_id": "000000000000000000000004",
  "extension_id": "6073280be899ea5b1150fd9d",
  "created_at": "2021-04-12T08:37:12.077Z",
  "modified_at": "2021-04-12T08:37:12.077Z"
}

URL Format: ${application_url}/ext/${attached_path}

Example​

Consider the following app proxy configuration:

  • attached_path: test
  • proxy_url: https://www.abc.com
  • application_url: https://www.xyz.com
  • Final URL: https://www.xyz.com/ext/test
  • Add Example for express route [ToDo]
// fdk.js
'use strict';

const config = require('./../common/config');
const extensionHandler = require('./../routes/extension_handler');

const { appRedis } = require('./../common/redis.init');
const { setupFdk } = require('fdk-extension-javascript/express');
const { RedisStorage } = require('fdk-extension-javascript/express/storage');

const baseUrl = config.BROWSER_CONFIG.HOST_MAIN_URL;
const cluster_url = `https://api.${config.fynd_platform_domain}`
let fdkExtension = setupFdk({
    api_key: config.extension.api_key,
    api_secret: config.extension.api_secret,
    base_url: baseUrl,
    scopes: ["company/saleschannel"],
    callbacks: extensionHandler,
    storage: new RedisStorage(appRedis, '<project-name>'),
    access_mode: 'offline',
    cluster: cluster_url,
});

module.exports = {
    fdkExtension
};

const { fdkExtension } = require('./fdk');
const applicationApiRoutes = fdkExtension.applicationProxyRoutes;
applicationApiRoutes.use("/v1", ApplicationRouter);
app.use("/", applicationApiRoutes);


Final URL: <application_url>/ext/test/v1/
            https://www.abc.com/ext/test/v1

How to remove a Proxy URL​

For removing the particular proxy of an application URL extension developer have to follow some steps

Sample Request

// Promise
const promise = client.application("<APPLICATION_ID>").partner.addProxyPath({  extensionId : value,
 body : {attached_path, proxy_url} });

// Async/Await
const data = await client.application("<APPLICATION_ID>").partner.addProxyPath({  extensionId : value,
 body : {attached_path, proxy_url} });

Sample Response

{
  "message": "Proxy URL deleted",
  "data": {
    "_id": "607406b8a472cd527303692f",
    "attached_path": "test",
    "proxy_url": "https://www.abc.com",
    "company_id": "1",
    "application_id": "000000000000000000000004",
    "extension_id": "6073280be899ea5b1150fd9d",
    "created_at": "2021-04-12T08:37:12.077Z",
    "modified_at": "2021-04-12T08:37:12.077Z"
  }
}

Benefits of Proxy URL​

  • There will be no CORS issue as the extension URL is proxied via application URL, so there is no extension URL upfront.
  • There will be an extra parameter of x-application-data in headers which will be useful to fetch application data