Share this article
Improve this guide
FIX: No access-control-allow-origin header error in Angular
3 min. read
Updated onOctober 4, 2023
updated onOctober 4, 2023
Share this article
Improve this guide
Read our disclosure page to find out how can you help Windows Report sustain the editorial teamRead more
Key notes
One of the most common error messages Angulardeveloperscan encounter in their day to day work is:no access-control-allow-origin header present on the requested resource.
This is not a specific Angular problem, but a CORS (Cross-Origin Resource Sharing) header issue. It could mean that the back-end server is configured to work on a different port or domain.
How do I fix the No access-control error on Windows 10?
1. Make changes at the server level
If you have access to the server, enable CROS requests by addingAccess-Control-Allow-Origin: *header. After that, configurecorsentry, undersystem.webServerinweb.configfile, as in the example below.
Here,corswill allowGETandHEADrequests fromhttps://someorigin.domain.com/.
Also, if you’re usingIIS (Internet Information Services)you would need to downloadIIS CORS Module.
Be careful to specify a domain or a list of domains instead of *. Otherwise, cross-origin requests to the server would be enabled from anywhere.
OnApache, in the configuration file, you need to add the lineHeader set Access-Control-Allow-Origin ‘’.Again, it is wise to replace the ‘’, with a list of sources from where the requests would be made.
2. Run your own proxy server
A proxy server would forward your requests to the remote server. Next, we are going to see how to configure a proxy server.
Requests fordatain Angular are API calls to localhost, on port 4200, like this location:
However, in the example above, we assumed that the requesteddatais atthis location:
Interested in good proxy solutions? Check out this list of dedicated tools
3. Disable the Same Origin Policy in your browser
Note:this particular method is not recommended since this can expose your browser (and your system) to major security risks.
If everything else is not working, you can resort to disabling the Same Origin Policy in the browser. However be careful, as this would expose your browser (and your system) to major security risks.
ForGoogle Chrome, in Windows 10, open Command Prompt as anadministratorand run the following command:
C:Program Files (x86)GoogleChromeApplicationchrome.exe" –disable-web-security –disable-gpu –user-data-dir=~/chromeTemp..
In conclusion,no access-control-allow-origin header present on the requested resourceerror message is a server-side issue.
For Angular developers, modifying server configuration or using aproxyserver should work just fine.
Tell us what you think of this guide in the comment section below.
[wl_navigator]
More about the topics:1Password,Programming tools and tips
Teodor Nechita
Eager to help those in need, Teodor writes articles daily on subjects regarding Windows, Xbox, and all things tech-related.
When not working, you may usually find him either at the gym or taking a stroll in the park, trying to find inspiration for the next articles he may write.
User forum
0 messages
Sort by:LatestOldestMost Votes
Comment*
Name*
Email*
Commenting as.Not you?
Save information for future comments
Comment
Δ
Teodor Nechita
