1

I am hoping to use Tinylicious/Fluid Framework to enable communication across clients that are on different machines. For app-specific purposes, I have my app server running over https (at https://<domain1>.ngrok.io/). I then have Tinylicious serving from a different https URL (at https://<domain2>.ngrok.io/). Here is how I'm instantiating my Fluid client and connection (code adapted from https://github.com/microsoft/FluidHelloWorld):

import { ContainerSchema, SharedMap } from "@fluid-experimental/fluid-framework";
import { FrsClient, FrsConnectionConfig, FrsContainerConfig, InsecureTokenProvider } from "@fluid-experimental/frs-client";
import { getContainerId } from "./utils";

const { id, isNew } = getContainerId();

const localConfig: FrsConnectionConfig = {
    tenantId: "local",
    tokenProvider: new InsecureTokenProvider("anyValue", { id: "userId" }),
    orderer: "https://<domain2>.ngrok.io",
    storage: "https://<domain2>.ngrok.io"
};
const client = new FrsClient(localConfig);

const containerConfig: FrsContainerConfig = { id };
const containerSchema: ContainerSchema = {
    name: "hello-world-demo-container",
    initialObjects: { data: SharedMap }
};
const { fluidContainer } = isNew
    ? await client.createContainer(containerConfig, containerSchema)
    : await client.getContainer(containerConfig, containerSchema);
...

However, when I run my app I get this cross-origin error when trying to connect to Tinylicious, because my app (at https://<domain1>.ngrok.io/) has a different domain than Tinylicious (https://<domain2>.ngrok.io/):

Access to XMLHttpRequest at 'https://<domain2>.ngrok.io/documents/local' from origin 'https://<domain1>.ngrok.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there a way I can instantiate Tinylicious or another Fluid service and tell it origins (i.e., https://<domain1>.ngrok.io/) it should allow?

Rebecca Krosnick
  • 11
  • 1
  • Because you're just running this for local testing, you can use a header that adds the Access-Control-Allow-Origin header to every request. This Chrome extension does that for you: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en – Sam Broner Aug 06 '21 at 15:17

1 Answers1

0

This is because there is no Access-Control-Allow-Origin header from the ngrok origin page.

Because you're just running this for local testing, you can use a plugin that adds the Access-Control-Allow-Origin header to every request. This Chrome extension does that for you, although I'm sure there are others.

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Sam Broner
  • 471
  • 2
  • 9