Local development with the Webflow API

Design help Data API
1

Hi,

I try to get Webflow API to work in our system without success, we would like to show articles and “message of the day” listed in our customer service platform from Webflow collections, then we only need to add/update our news one place…

When I try to make an AJAX call from my local dev environment, I get the following error message:

Fetch API cannot load https://api.webflow.com/collections/58809c601bdb92b75a41ab9b/items. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Any idea what I can do?

2

Making cross-domain requests in the browser requires the endpoint you are sending requests to to enable support for it via CORS headers. However there is no way for authenticated APIs like Webflow to implement these headers because it requires users to include their secret api key (aka their webflow password) in the javascript they are serving publically.

In order to utilize authenticated APIs, to do it securely the requests must come from your server where the private api keys are not publically made visible to the world. The CORS limitation is only a limitation of your browser, not the API, so making the requests from a server will work without issue.

3

@nathan What if the secret API key is not required, but only visitor-supplied access token? No API keys or access token will be in the source of the site. Would just simply having the site running on SSL be enough for the Access-Control-Allow-Origin to be added?

4

What if the secret API key is not required, but only visitor-supplied access token? No API keys or access token will be in the source of the site.

How can we tell that scenario apart from the one where the keys are included in the site source? We only see a request coming in with api keys included, there is no way for us to determine where they came from. So to include CORS headers on the response would mean we would have to do it for all requests, not just the specific case you’re describing.

For APIs which involve user authorization, there is no secure way to include CORS headers on the response. Registering an oauth application and having users authorize your site via the application is how oauth is designed to support this use case.

5

Is it possible to use oauth to create a site that people can log into using Webflow? Not having that ability is crippling me.

6

+1 for the use cases this would open up.

Has webflow team considered a CORS-enabled API endpoint that would be locked down to read-only operations on data that is already public?

For example, to serve public blog content or product documentation from within a single page application.

Thanks @nathan

1 Like
7

Has webflow team considered a CORS-enabled API endpoint that would be locked down to read-only operations on data that is already public?

It’s not something we are currently working on, but it is something on our radar that I would like us to implement in the future - having it would open up many interesting use cases!

8

Good deal. Thanks for the reply!

11

In order to utilize authenticated APIs, to do it securely the requests must come from your server where the private api keys are not publically made visible to the world. The CORS limitation is only a limitation of your browser, not the API, so making the requests from a server will work without issue.

Are there any server side solution for this? Any php code for using the api?

1 Like