Mapbox-gl-js给出' message: Not found '错误，状态(null)，因此CORS

Question

这几天我一直遇到一个问题，我就是不明白。每次我使用Mapbox-gl-js或像ReactMapGL这样的包装器时，我都会得到一个CORS错误，说The Same Origin Policy disallows reading the remote resource at https://events.mapbox.com/events/v2?access_token=pk.eyJ1IjoibHVjYW5nZXZhcmUiLCJhIjoiY2w0eTltbzN3MDdsaDNqcG05bmIzdjhoaCJ9.Z8nQ1tZU4hUPf6wmR3rGbw. (Reason: CORS request did not succeed). Status code: (null).(我将在解决此问题后刷新API密钥)。转到链接得到响应:{"message":"Not Found"}。我知道这不是因为API密钥错误，因为如果我向API密钥添加几个字符使其错误，它会给出密钥无效的错误。访问令牌只是仪表板提供给我的默认公共令牌。

App.tsx

import ReactMapGL from 'react-map-gl';
const App = () => {
const [viewPort, setViewPort] = useState({
latitude: 45.4211,
longitude: -75.6903,
width: "100vw",
height: "100vh",
zoom: 10
});
return (
<div className='App'>
<ReactMapGL {...viewPort} mapboxAccessToken={process.env.REACT_APP_API_KEY}>
marker
</ReactMapGL>
</div>
);
}
export default App;

.env

REACT_APP_API_KEY=pk.eyJ1IjoibHVjYW5nZXZhcmUiLCJhIjoiY2w0eTRia2wwMXZoMDNtbWxxN2J3Y2g1bCJ9.swneG9rHPGqunt0HeiXDfw

在仪表板中，我为这个项目创建了一个新令牌，它在Restricted URLs选项中列出了0个url，即使按照本教程的步骤进行操作，它也会给出完全相同的输出。使用Mapbox-gl-js和react-map-gl库会得到相同的输出

提前感谢!

Answer 1

错误说明你的应用程序不允许向其他源发出请求。检查同源策略完整描述——https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

问题很可能出在你的安全配置上。检查你是否在项目的某个地方使用了头盔(很可能在你的express服务器中)，如果你这样做了，检查contentSecurityPolicy配置。

如果你启用了同源策略，这意味着你必须明确指定所有你想要发出请求的域，这些域与你的站点不是同源的，所以策略是满足的。