Chrome 以外的浏览器中的 JSON.parse 错误答案

【问题标题】：JSON.parse error in browsers other than ChromeChrome 以外的浏览器中的 JSON.parse 错误
【发布时间】：2020-10-12 17:46:44
【问题描述】：

我在从 Chrome 以外的浏览器访问时解析获取的 JSON 数据时遇到问题。 Firefox 返回最详细的错误：“SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data”。在某些情况下，当托管在我的本地 node.js 开发环境中时，代码将在其他浏览器中运行，但只有在文件由 SharePoint 托管时才在 Chrome 中运行。在我上传到 github 页面的示例中，它适用于 Chrome 而不是 Firefox 等。人。

    function loadData() {
      return fetch('./data.txt').then((response) => response.json());
    }

    function loadMoreData() {
      return fetch('./moredata.txt').then((response) => response.json());
    }

    function loadAllData(){ 
      return Promise.all([loadData(),loadMoreData()]);
    }

    loadAllData().then( ([data, moredata]) => {
        console.log(data);
        console.log(moredata);
    });

数据.txt：

[
  {"emp_id":"90176","labor_code":"500"},
  {"emp_id":"90202","labor_code":"500"},
  {"emp_id":"90678","labor_code":"400"},
  {"emp_id":"91245","labor_code":"300"},
  {"emp_id":"91304","labor_code":"200"},
  {"emp_id":"94377","labor_code":"100"},
  {"emp_id":"94398","labor_code":"200"}
]

更多数据.txt：

[
  {"emp_id": "90176","hire_year": "1999"},
  {"emp_id": "90202","hire_year": "2010"},
  {"emp_id": "90678","hire_year": "2005"},
  {"emp_id": "91245","hire_year": "1994"},
  {"emp_id": "91304","hire_year": "1995"},
  {"emp_id": "94377","hire_year": "1995"},
  {"emp_id": "94398","hire_year": "1998"}
]

这里是 github 数据的位置，它在 Chrome 和 Firefox 中运行良好，但在我传输要由 SharePoint 托管的文件时在 Firefox 中无法运行：

演示（见console.log）：https://allenblair.github.io/fetchissue/

源文件：https://github.com/allenblair/fetchissue/

我的代码中是否有什么需要不同的地方？

【问题讨论】：

我在 Firefox 中没有看到任何错误。两个数组记录到控制台。
是的，我刚刚意识到我的错误。这种情况在 github 上看起来不错，但是在将相同的文件传输到 SharePoint 时，它会产生错误。不幸的是，我没有公共的共享点服务器来演示错误。
所以查看 Firefox 控制台中的文件，看看里面有什么。接下来改为阅读console.log(escape(response.text()) 并查看其中的内容。我的猜测是其中可能有一些隐藏的字符......
@AllenBlair 这是一个承诺。你需要做response.text().then(t => console.log(t))
@AllenBlair 尝试在fetch 选项中包含credentials: 'include'。

标签： javascript json sharepoint

【解决方案1】：

这是由于 Firefox 中的 fetch 返回 401 not authorized 所以是的，谢谢@JLRishe 我们必须在标题中添加credentials: 'include'

我在 SharePoint 2016 中将它与 react 一起使用

componentDidMount() {


    let headers = {
        method: 'GET',
        credentials: 'include',
        headers: {
            Accept: "application/json;odata=verbose"
        },
        mode: 'cors',
        cache: 'default'
    };

    let siteURL = _spPageContextInfo.siteAbsoluteUrl;
    let apiPath = siteURL + "/_api/web/lists/getbytitle('linksfooter')/items?$select=Title,LinkFooterColonne,LinkFooterContent,LinkFooterPosCol";



    fetch(apiPath, headers)
        .then(
            res => res.json()
        ).then(
            (d) => {
                // console.log('fetched data = ', d)
                let footerItemsResult = d.d.results;
                let categories = footerItemsResult.map(item => item.LinkFooterColonne).filter(function (v, i, a) {
                    return a.indexOf(v) === i
                })
                // console.log('footerItemsResult = ', footerItemsResult)
                this.setState({
                    isLoaded: true,
                    footerItems: footerItemsResult,
                    categories: categories
                });
            },
            (error) => {
                this.setState({
                    isLoaded: false,
                    error
                });
            }
        )
}

【讨论】：