This article discusses some of the common sources of issues when using Stoplight's embedded HTTP request maker.
While sending a request to an API, you may come across errors like the one below.
These errors are typically caused by a few different issues, each discussed in more detail below. Before continuing, it is recommended to open your browser's developer console.
Where are requests sent from?
Before diving into the common issues, it's important to clarify where requests are actually sent from when you click the Send button. When sending requests to an API endpoint, the request is sent directly from your local browser (or desktop application, if you're using Studio Desktop). This means that you can access local services or endpoints that may not be exposed to the broader internet (services hidden behind a VPN, for example), however it also means that browser security limitations may come into play. Read more below to see how.
CORS stands for Cross-Origin Resource Sharing, and is a browser security feature used to ensure that web pages do not request data from external resources (origins) that don't allow it. If you'd like to read more about CORS, please see here.
When a CORS error occurs, you'll see a message logged in your browser console similar to the one below:
To resolve this issue, you'll want ensure your API includes an Access-Control-Allow-Origin header in every response, allowing requests to succeed if they come from a specific domain. For example:
Which will allow requests from your documentation site to be allowed, or:
Which will allow requests from all Stoplight domains.
An alternative option is to use a custom domain that is under the same domain as your API:
Which can be found under your workspace basic settings tab.
One common source of errors is related to "mixed content", which is when a website attempts to load HTTP resources over a website that was originally loaded over HTTPS. If this is the source of the issue, your browser's developer console should list a message similar to the one below:
The way to resolve this issue is to ensure that your API supports HTTPS and that an HTTPS endpoint is provided in your API specification.