Accessing external APIs from Hype Previews
When connecting from Hype to external Application programming interfaces (APIs) your options for local testing are limited by the CORS security imposed on you by the browser. This security measures makes much sense in the open web to prevent cross site scripting but gets in the way if you want to have quick turnarounds in testing your Hype project using the regular preview function.
Web pages you visit make frequent requests to load assets. If these requests for assets go unchecked, the security of your browser may be at risk as your browser might blindly download malicious code. As a result, many modern browsers follow security policies to mitigate such risks.
CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests. The specification defines a set of headers that allow the browser and server to communicate about which requests are allowed or disallowed by following a set of policies.
The same-origin policy for example is very restrictive. Under this policy, a Hype document hosted on your local preview server can only interact with other documents that are hosted there.
CORS failures result in errors, but for security reasons, specifics about the error are not available to JavaScript. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.
This cross-origin sharing standard are mostly enabled for cross-site HTTP requests like XMLHttpRequest or Fetch APIs. These are the technologies used to access most available APIs.
Safari allows you to Disable Cross-Origin Restrictions. Just enable the developer menu from Preferences >> Advanced, and select "Disable Cross-Origin Restrictions" from the developer menu.
If you don't see the Developer menu yet is because in Safari it is disabled by default. It can be quickly turned on through the Safari application settings to reveal the additional developer-centric features of the web browser.
Don't forget to enable it again after disabling it for local testing.
This article is only ment for development. If you deploy your final Hype file to the same server or the API restrictions don't apply to your final publishing destination you don't have to worry about CORS once you deploy. On the other hand if you keep running into CORS problems after deploying your Hype project and you can't enable access throught the API your trying to consume you can often use the CORS proxy workaround, but this is another topic entirly and you can find many solutions on the web searching for these keywords.
- Choose another topic from the sidebar
- Visit the topic index
- Return to the welcome page
- Learn about contributing
- Consider making an one-time donation
- Visit the landing page for this project
