因为它违反了以下内容安全策略指令：“script-src 'self' blob:”。 请注意，'script-src-elem' 没有明确设置，

Question

I have been following, the Node.js, Express, MongoDB & More: The Complete Bootcamp 2022 by Jonas on Udemy. He has used Mapbox in lecture 187 and Axios in 189. I have tried every possible solution on the net but the following are the problems that I have faced:

From lecture 187: Maps are not displayed the following error is thrown by the browser: GET https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200.

Here is a ss of the code that I have tried but it's still not working: Click to see ss

From lecture 189: Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. Here is a look at the code that I have tried Click to see image

Answer 1

Hope you are doing well.

Your application isn't configured to execute Cross-Origin resources and for that reason, the Mapbox stylesheet you are trying to use from an external source is getting blocked. In order to solve it, just include crossorigin='anonymous' after the link. Like this way-

<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' crossorigin='anonymous'>

Hope this will help!

Another issue that you have mentioned with Axios, is mostly the same as the first issue. Since you are trying to use the CDN link, the HTTP security policy defined for the application isn't allowing it. If you are using the Helmet Package then place the following code accordingly-

 app.use(helmet({ contentSecurityPolicy: { useDefaults: true, directives: { 'script-src': ["'self'", "https://cdnjs.cloudflare.com/"] } } }) );

Let me know if that helps! 😊

Answer 2

I am taking the same course with Jonas. And After a lot of failed attempted solutions, I finally make it to work. What I did:

1. I installed the package using npm:

npm install mapbox-gl --save

2. in the mapbox.js file I added at the top a require:

var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

3. finally in order to be able to use the mapbox style, I added below the 'block append head' :

link(href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' crossorigin='anonymous')

Hope this works for you also.