javascript - 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/
我的代码中有什么需要不同的地方吗?
解决方案
这是由于 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
});
}
)
}
推荐阅读
- dart - 如何在 Dart 中使用 PI 常数
- c# - MVC Razor For 循环绑定到 ViewModel 问题
- angular - 页面加载时显示动态标题
- python - Python - 如何使函数参数全局化?
- node.js - 在 GraphQL 参考实现中,resolvers 期望返回一个 Iterable,如何返回一个异步 Iterable?
- javascript - 使用js在特定时间禁用按钮
- makefile - 使用 make,我如何在程序集项目中使用 .c 文件防止这种行为?
- javascript - 试图存储号码并返回但我没有被罚款?
- javascript - 如何通过javascript访问静态网页的某些元素(html不可访问)?
- sql-server - 确定调用 DDL 触发器的操作类型