对于我的获取请求，我不断收到错误“字符串与预期的模式不匹配”答案

【问题标题】：I keep getting the error "the string did not match the expected pattern" for my fetch request对于我的获取请求，我不断收到错误“字符串与预期的模式不匹配”
【发布时间】：2019-09-04 23:12:22
【问题描述】：

对于我的提取请求，我不断收到错误消息“字符串与预期的模式不匹配”。我在这里和其他论坛上看到一些人有类似的问题，但无法查明问题所在。如果有人有任何建议，请告诉我。

function showRecipes(){
            const ingredients = document.getElementById('ingredients').value.replace(/\s/g, "");
            const meal = document.getElementById('meal').value;
            const display = document.getElementById('display'); //Where results will go

            let url = 'http://www.recipepuppy.com/api/';
            url += `?i=${ingredients}&q=${meal}`;

            fetch(url, { mode: "no-cors"})
                .then(response => {
                    response.json()
                        .then(data => {
                            data.results.forEach(recipe => {
                                const container = document.createElement('div');
                                container.setAttribute('class', 'container');

                                const h1 = document.createElement('h1');
                                h1.textContent = recipe.title;

                                const p = document.createElement('p');
                                p.textContent = recipe.ingredients;

                                display.appendChild(container);
                                container.appendChild(h1);
                                container.appendChild(p);
                            })
                        })
                        .catch(err => {
                            console.log(err);
                        })
                })
                .catch(err => {
                    console.log('ERROR: ' + err);
                })
        }

【问题讨论】：

标签： javascript html api

【解决方案1】：

如果服务器的响应是文本，但您尝试使用 res.json() 将其解析为 JSON，您可能会收到此错误。

fetch(serverUrl, {method: 'GET'})
.then((res) => res.json())

如果服务器返回文本，res.text() 是合适的。

在这种情况下，Safari 曾经给我 OP 的错误，但 Chrome 更具体：“位置 0 的 json 中的意外令牌 W” -- res.json() 期望字符串的第一个字符应该是 { 或 [，因为这就是 JSON 的开始方式。

或者，正如 Safari 所说，“字符串与预期的模式不匹配。”

【讨论】：

【解决方案2】：

对于那些收到此消息的人，也可能调试他们的代码并找到包含与开发人员工具中提供的信息不匹配的信息的 HTTP 响应对象，这是由no-cors 创建的问题。去掉no-cors，就不会有这个问题了。

【讨论】：

【解决方案3】：

fetch('example.json').url())
        .then(res => {
            console.log(res);
        });

如果上面的代码返回了200的状态，而res.text()可以工作但res.json()不行，那么这是一个json格式问题，可能编译器没有识别以下：

参考例如/**/或//
以逗号结尾，例如},} 或],}
\t、\n等空白

建议的json模式是

{"a":"b"}

虽然以下内容更适合阅读：

{
    "a": "b",
}

此问题在 Sublime Text

中明显出现

这里有一个解决方案：

GitHub

然后尝试 src 后跟：

fetch('example.json')
    .then(res => res.json())
    .then(json => {
        console.log(json);
    });

【讨论】：