The frontend is angular SPA and the backend is ASP.NET Core Web API 3.1. The backend API contains only two endpoint: one public, one secured with [Authorize] attribute. I am able to login to the sample angular application, and also able to return data from the public endpoint. But once try to call the secured API, it returns the following error:
The Allowed Web Origins and Allowed Origins(CORS) are configured as such:
The app works fine locally. It only throws error when deployed to server.
Please help!
The error message “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” typically occurs in web development when you are trying to make a cross-origin XMLHttpRequest (XHR) or fetch request, but the server hosting the requested resource doesn’t include the necessary CORS (Cross-Origin Resource Sharing) headers to allow the request from a different origin (domain). To fix this, you need to configure the server to include the “Access-Control-Allow-Origin” header in its response with the appropriate origin value, which can be a specific domain or “" to allow requests from any origin. For example, in Node.js with Express, you can set the header like this: res.header(“Access-Control-Allow-Origin”, "”); Ensure that you also handle other CORS headers and methods as needed, depending on your specific use case and security requirements.
