https://github.com/njgibbon/nicks-cors-test

Simple HTML & JS Tool to quickly test CORS locally.
https://github.com/njgibbon/nicks-cors-test

cors cross-origin-resource-sharing html http https javascript jquery js tools

Last synced: 17 days ago
JSON representation

Simple HTML & JS Tool to quickly test CORS locally.

• Host: GitHub
• URL: https://github.com/njgibbon/nicks-cors-test
• Owner: njgibbon
• Created: 2019-04-19T11:32:32.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-28T00:02:36.000Z (about 3 years ago)
• Last Synced: 2024-10-11T11:15:36.609Z (about 1 month ago)
• Topics: cors, cross-origin-resource-sharing, html, http, https, javascript, jquery, js, tools
• Language: HTML
• Homepage:
• Size: 5.86 KB
• Stars: 125
• Watchers: 3
• Forks: 62
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nicks-cors-test

Simple HTML & JS Tool to quickly test CORS locally.

# Blog

https://medium.com/pareture/simple-local-cors-test-tool-544f108311c5

# CORS

Cross Origin Resource Sharing (CORS) is a simple and powerful mechanism which uses HTTP headers so that a server knows where a request is coming from and can choose whether or not to accept the request based on this.

Better information here:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

The header which is provided as the argument is the ‘Origin’. This is set by the User-Agent (the thing that makes the request) and can not be overridden (security enforced).

The server with the resource uses the `Access-Control-Allow-Origin` header to allowlist particular domains or allow requests from all origins using the wildcard:

```

Access-Control-Allow-Origin: *

```

# Tool

You can use this simple tool to test making CORS requests and examine the outcome.

* The HTML file is simply a shell to call the Javascript function.

* The JS file executes an AJAX request based on the values you adjust.

# Guide

* Download the files and open `index.html` in a browser. You will be faced with a blank screen and nothing else.

* Open the browser tools: e.g **Right-click** > **Inspect** > **Console**.

* Open `main.js` file in a text editor.

* Adjust the `url` value depending on the resource you want to check, save `main.js` and refresh the browser. 

    * Try `https://google.com` and you will see it has been blocked due to CORS.

    * Try `https://api.github.com` and you will see it is not blocked and the content will be output.