I get 403 when using react-azure-maps

Question

Hi, I try to use Azure maps in my React project using the react-azure-maps lib. I have provided the Primary Key given to me when I created the project, added all my details but I get a 403 but get no response feedback. I run it on my local machine. I guess it has something to do with my IP address or something or what could I be missing? Thank you

Answer 1

I suspect this is caused by one of two things:

• Many React apps tends use a Content Security Policy (CSP). As such, you will need to allow access to the Azure Maps domains in this policy, otherwise React / CSP will block access and throw a 403 error. For example, you might need something like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://atlas.microsoft.com; style-src 'self' 'unsafe-inline' https://atlas.microsoft.com; media-src *">

• Another possible cause could be related to firewall or network security blocking access to the Azure Maps domain (https://atlas.microsoft.com). This would also result in a 403 error. In this case you would need to allow access to this domain in your firewall/network (if in a corporate setting you may need to talk to your IT team).