-1

I am trying to deploy a mern full stack app with mapbox on heroku where you can add pins with react-map-gl and it does not seem to display the map after login or registration and I get csp errors. I think if I solve those mapbox would show.

The Content-Security-Policy directive name ''unsafe-inline'' contains one or more invalid characters. Only ASCII alphanumeric characters or dashes '-' are allowed in directive names.

index.js:89 Refused to create a worker from 'blob:https://map-add-pins.herokuapp.com/ca369312-252f-4be1-85be-9bc4b47805a7' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

I tried to add this meta tag in my index.html to offset the csp but that did not solve the issue.

<meta http-equiv="Content-Security-Policy" content="'unsafe-inline' blob:;">

I would like to know what my meta tag should be or if you could offer another solution.

my heroku link to see issue: https://map-add-pins.herokuapp.com

Bqdor
  • 19
  • 5

1 Answers1

0

Instead I deployed the frontend of the application to netlify and the backend to heroku and that solved the issue with the map.

Bqdor
  • 19
  • 5