因為它違反了以下內容安全策略指令：“script-src 'self' blob:”。 請注意，'script-src-elem' 沒有明確設置，

Question

我一直在關注Node.js、Express、MongoDB 等：Jonas 在 Udemy 上的完整訓練營 2022 。 他在第 187 課中使用了 Mapbox，在第 189 課中使用了 Axios。我在網上嘗試了所有可能的解決方案，但以下是我遇到的問題：

從第 187 講：不顯示地圖，瀏覽器拋出以下錯誤：GET https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 .

這是我嘗試過但仍然無法正常工作的代碼的ss：點擊查看ss

來自第 189 課：拒絕加載腳本“https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js”，因為它違反了以下內容安全策略指令： “腳本-src 'self' blob：”。 請注意，'script-src-elem' 沒有明確設置，因此 'script-src' 用作后備。 這是我嘗試過的代碼點擊查看圖片

Answer 1

希望你一切順利。

您的應用程序未配置為執行跨域資源，因此，您嘗試從外部源使用的 Mapbox 樣式表被阻止。 為了解決它，只需在鏈接后包含crossorigin='anonymous' 。 像這樣——

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

希望這會有所幫助！

您在 Axios 中提到的另一個問題與第一個問題基本相同。 由於您嘗試使用 CDN 鏈接，因此為應用程序定義的 HTTP 安全策略不允許它。 如果您使用的是頭盔包，請相應地放置以下代碼 -

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

讓我知道這是否有幫助！ 😊

Answer 2

我正在和喬納斯上同樣的課程。 在嘗試了很多失敗的解決方案之后，我終於讓它工作了。 我做了什么：

1. 我使用 npm 安裝了這個包：

npm install mapbox-gl --save

2. 在 mapbox.js 文件中，我在頂部添加了一個要求：

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

3. 最后為了能夠使用 mapbox 樣式，我在 'block append head' 下面添加了：

鏈接（href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' crossorigin='anonymous'）

希望這也適用於你。