As a web developer, you likely need to test your REST API locally. When using a browser like Safari, you might encounter issues such as the following messages.
Origin http://localhost:8081 is not allowed by Access-Control-Allow-Origin. Status code: 200
Fetch API cannot load http://localhost:8080/api/ due to access control checks.
Failed to load resource: Origin http://localhost:8081 is not allowed by Access-Control-Allow-Origin. Status code: 200
Don't worry, this is actually a strong security feature implemented by modern web browsers.
I won't overwhelm you with details about CORS—you can read more in the official documentation. However, if you're interested, here's a summary from Wikipedia.
Cross-origin resource sharing (CORS) is a mechanism to safely bypass the Same-origin policy, that is, it allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.
Here's an example of a cross-origin request: the front-end JavaScript code served from https://example.com/ uses fetch() to request https://example.org/api/data.json.
Luckily, bypassing CORS restrictions in Safari is straightforward.
Solution to Disable CORS in Safari
- Click on Safari in the top menu bar and select Settings....
- Go to the Advanced tab and check the Show features for web developers option.
- A new Developer tab will appear.
- Select Developer tab and enable the Disable cross-origin restrictions option.
- Return to Safari and refresh the page. It should work now!
Video
Here is the video to visualize the steps above.
Conclusion
Disabling CORS on Safari through the settings is quite simple.
I do wish there were a command-line solution, but let's be grateful for any method available.
Thanks for reading, and see you around!
Top comments (0)