Issue:
Nothing happens when I send requests to my API.
Error while making the request - Network Error the API did not return a response.
Environment:
HTTP Request Maker
Solution:
These errors are typically caused by a few different issues, each discussed in more detail below. Before continuing open your browser's developer console so you can get the exact error message.
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
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 these:
- "...blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response."
- "No 'Access-Control-Allow-Origin' header is present on the requested resource."
To resolve this issue, you'll want ensure your API includes the header specified in the error in every response, allowing requests to succeed if they come from a specific domain. For example:
Access-Control-Allow-Origin: https://example.stoplight.io
Which will allow requests from your documentation site to be allowed, or:
Access-Control-Allow-Origin: https://stoplight.io
Which will allow requests from all Stoplight domains.
Note: If you receive the Network Error and dev tools shows the message below you need to turn off Adblocker to see the actual error.
Mixed Content
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.
Comments
0 comments
Please sign in to leave a comment.