I keep getting the error "the string did not match the expected pattern" for my fetch request

Question

I keep getting the error "the string did not match the expected pattern" for my fetch requests. I've seen some people having similar problems on here and other forums but can't pinpoint the problem. If anyone has any suggestions, please let me know.

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

Solution 1

You may get this error if the server's response is text but you attempt to parse it as JSON using res.json().

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

res.text() is appropriate if the server returns text.

In this situation Safari once gave me the OP's error, but Chrome was more specific: "unexpected token W in json at position 0" -- res.json() expects the first character of the string to be { or [ since that is how JSON begins.

Or, as Safari would say, "the string did not match the expected pattern."

Solution 2

For those receiving this, and also perhaps debugging their code and finding an HTTP Response object containing information which does not match the information given in the developer tools, this is problem is created by no-cors. Remove no-cors, and you won't have this problem.