在HTML静态页面中使用原生JavaScript，我想从 URL_SOURCE 获取JSON数据：

const URL_SOURCE = 'https://example.source.host';

const doGetMetaDataEvent = async () => {
    setInterval(async () => {
        let data;

            fetch(URL_SOURCE, {
                method: 'GET',
                headers: {
// some headers
                }
            })
                .then(response => response.json())
                .then(data => console.log('JSON response:', data))
                .catch(error => console.error('Error data source:', error));


        if (data) {
            try {
                const nowData = data?.response?.informationjson?.getNowData;
                console.log('Listening to:', nowData?.songtitle);
            } catch (error) {
                console.warn('Error reading source data! ', error.message);
            }
        }
    }, 10000);

}

doGetMetaDataEvent().then(() => {
    console.log("Render meta data successful");
}, e => {
    console.log('error response ', e.message);
});

错误是：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at .... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Error data source: TypeError: NetworkError when attempting to fetch resource. ...
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

但在Firefox上，使用 URL_SOURCE 时返回的是一个漂亮的JSON对象。到底出了什么问题？

解决方案

这里的关键问题是“跨域”。

这是一种安全机制，在未获得对方明确同意的情况下，不允许一个网页读取另一个网页（不同域名）的内容。所以当你直接在浏览器中打开链接时，这不属于跨域请求，一切都正常。

CORS在初次了解时可能会带来不少困扰，你可以在MDN上看到对它的一个不错的描述：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS

据我所知，直接读取静态文件默认不会添加所需的响应头。如果你不拥有你要读取的服务器，且它们也没有提供允许CORS的其它端点，那么就没办法实现。如果你确实控制你请求的服务器，可以看看示例中如何启用CORS。

https://enable-cors.org/index.html