首页 > 解决方案 > Chrome 以外的浏览器中的 JSON.parse 错误

问题描述

从 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/allenbair/fetchissue/

我的代码中有什么需要不同的地方吗?

标签: javascriptjsonsharepoint

解决方案


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

我将它与 SharePoint 2016 中的反应一起使用

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
                });
            }
        )
}

推荐阅读