CORS Debug Page
I have been building RESTful API’s for years in many teams and with every project we seem to encounter a CORS issue. CORS is an acronym for Cross Origin Resource Sharing and it often comes into play with RESTful API’s and single page software applications build with frontend frameworks such as AngularJs or ReactJs.
CORS is something your browser will use to prevent it from making requests to a location it doesn’t have permission to access. The browser tests the permission by first sending a OPTIONS type request to the server and checks the special CORS headers. If the headers are present and valid for the domain that the application is hosted on, the app will then make the actual request to the API.
However if the API is not configured properly, it may not respond with the valid CORS headers, preventing the application from working. Sometimes the frontend web application may be at fault. It can be difficult getting to the root of the problem.
The API developer may use a tool such as Postman to test his API as s/he creates it but this will not make CORS requests as it’s not cross origin and therefore any CORS issue on a given endpoint may go unnoticed.
The CORS Debug Page is a stand-alone page that a developer can use to isolate the problem by either proving that the API works with a cross origin request or fails. Load the page in your browser and fill in the required fields including the endpoint in question and hit submit.
To better understand what is happening, open up the network Activity Monitor in the browser tools and watch the requests and their responses. If the request is successful it shows that the webapp is probably at fault. If it doesn’t succeed then the API is likely at fault.
Download or fork the project on Github.
Sorry, comments for this entry are closed at this time.