Member-only story
How to Enable/Disable Cross-Origin Requests (CORS) in ASP.NET Core
If you’re a non-premium user, click here to read this article for free. If not, continue reading.
Access to fetch at ‘https://localhost:7010/WeatherForecast' from origin ‘http://localhost:4200' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
The above error is caused due to improper implementation of CORS in your .Net Core Web API application.
What is CORS ?
is an HTTP-header based mechanism that allows a server to specify any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. This is crucial for enabling web applications to interact with resources hosted on different domains, which is otherwise restricted by the same-origin policy for security reasons.
How Does Cors Work ?
CORS works by adding new HTTP headers that let servers describe which origins are permitted to read that information from a web browser. For HTTP request methods that can cause side-effects on server data (such as HTTP methods other than GET, or POST with certain MIME types), the specification mandates that browsers “preflight” the request. This involves sending an HTTP OPTIONS request to the server hosting the cross-origin resource to check if the server will permit the actual request.
How to fix it ?
I have created new API application to replicate this issue and got this error in angular application. Find the screenshot of CORS issue.
I got the error screenshot, because I have logged the error as below.
