Resolving 'Failed to Fetch' Errors in JavaScript

The "TypeError: Failed to fetch" error is a common and often frustrating issue encountered when working with web applications. This error usually arises from problems with the Fetch API and can be caused by a variety of factors.

Common Reasons for "Failed to Fetch" Errors

1. Incorrect or Incomplete URL

   - The URL used in the `fetch()` method might be incorrect or incomplete.

   - Make sure the URL includes the correct protocol (https:// or http://) and that the path is accurate.

2. CORS (Cross-Origin Resource Sharing) Issues

   - The server might not be returning the correct CORS headers. If you're unfamiliar with CORS, you can refer to the MDN documentation.

   - Ensure the server is configured with the appropriate `Access-Control-Allow-*` headers.

3. Incorrect Fetch Configuration

   - There could be errors in the HTTP method or headers passed to the `fetch()` method.

   - Double-check that the configuration, including the URL, HTTP method, and headers, is correct.

4. Browser Extensions

Occasionally, browser extensions can trigger these errors by interfering with API calls or altering the responses.

Steps to Debug

1. Verify the URL

   - Ensure the URL in the `fetch()` method is correct and complete.

   - Check that the protocol, path, and HTTP method are accurate.

2. Inspect the Browser Console

   - The browser console can provide valuable insights into failed API calls.

   - Look for errors related to CORS or other network issues.

3. Check CORS Headers

   - Confirm that the server is sending the correct CORS headers.

   - Use the browser’s Network tab to review the headers of the failed requests.

4. Experiment with Different Configurations

   - Try different `fetch()` configurations to pinpoint the issue.

   - Adjust methods, headers, and URL formats as needed.

5. Consider Using a Proxy

   - If modifying server headers isn’t possible, consider using a proxy to bypass CORS restrictions.

   - Implement proxies with tools like Express or `cors-anywhere` in Node.js.

Enable CORS on a resource using the AWS API Gateway console

 Sometimes while hitting an API gateway you get error suggesting No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In such a case, sometimes people suggest to set the request mode to 'no-cors' like so:

fetch(url, {

    mode: "no-cors",

    ...

})

But if you're getting CORS issues this is not the solution. If the API endpoint is something that you control, then you have to fix those CORS issue there. If the API endpoint is not something that you control, then you have to proxy your request through a server that does have CORS enabled.

You need to remove the mode: 'no-cors' setting from your request. Setting no-cors mode is exactly the cause of the problem you’re having. A no-cors request makes the response type opaque. The log snippet in the question shows that. Opaque means your frontend JavaScript code can’t see the response body or headers.

With no-cors — JavaScript may not access any properties of the resulting Response

So the effect of setting no-cors mode is essentially to tell browsers, “Don’t let frontend JavaScript code access the response body or headers under any circumstances.”

People sometimes try setting no-cors mode when a response doesn’t include the Access-Control-Allow-Origin response header or else because the request is one that triggers a CORS preflight, and so your browser does an OPTIONS preflight. But using no-cors mode isn’t a solution to those problems. The solution is either to:

1. configure the server to which you’re making the request such that it sends the Access-Control-Allow-Origin response header, and such that it handles OPTIONS requests
2. or set up a CORS proxy using code from https://github.com/Rob--W/cors-anywhere/ or such; see the How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 
3. Temporarily you can also use Chrome extension of Enabling CORS. But it is for debugging phase only.

However, it is evident that sometimes you clearly need to Enable CORS on a resource. You can do this using the API Gateway console.

To enable CORS support on a REST API resource

1. Sign in to the API Gateway console at https://console.aws.amazon.com/apigateway

2. Choose an API.

3. Choose a resource under Resources.

4. In the Resource details section, choose Enable CORS.

Next Steps/settings In the Enable CORS box:

• (Optional) If you created a custom gateway response and want to enable CORS support for a response, select a gateway response.
• Select each method to enable CORS support. The OPTION method must have CORS enabled.
• If you enable CORS support for an ANY method, CORS is enabled for all methods.
• In the Access-Control-Allow-Headers input field, enter a static string of a comma-separated list of headers that the client must submit in the actual request of the resource. Use the console-provided header list of 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' or specify your own headers.
• Use the console-provided value of '*' as the Access-Control-Allow-Origin header value to allow access requests from all origins, or specify origins to be permitted to access the resource.
• Choose Save.

After this, deploy the API again and see the fun in next call!

Json schema validation for Api Gateway request

Amazon’s API Gateway provides the facilities to map an incoming request’s payload to match the required format of an integration backend. It uses the concept of “models” and “mapping templates” to specify the mapping between the client payload and the server payload.

A model defines the structure of the incoming payload using JSON Schema. The model is an optional, but not required, piece of API Gateway. By providing a model, you make it easier to define the upcoming mapping template that actually does the transformation between the client and server.

For example, we can define a incoming Player model using the following JSON payload.

{
    "id": "AJamal",
    "alias": "Aha Jamal",
    "displayName": "Anwar jamal Faiz",
    "photoUrl": "https://api.example.com/player/AJamal/avatar.png"
}

JSON Schema is a vocabulary allowing you validate JSON documents. The particular JSON payload being validated is called an instance, and the document describing what a valid payload looks like is called the schema.

JSON Schema is used to describe a JSON document, so it helps to understand what, exactly, a JSON document is composed of these primitives:

• objects: {"field1": "value1", "field2": "value2"}
• arrays: ["first", "second", "third"]
• numbers: 42 or 3.1415926
• strings: "Lorem ipsum dolor sit amet"
• booleans: true or false
• null: null

The responsibility of JSON Schema is to describe a JSON document built from the these primitives.

JSON Schema is itself specified using JSON with predefined semantics for keywords and values. Going back to our Player example, we can specify the JSON Schema for the incoming document as follows:

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "type": "object",
    "properties": {
        "id": { "type": "string" },
        "alias": { "type": "string" },
        "displayName": { "type": "string" },
        "photoUrl": { "type": "string" }
    }
}

This JSON Schema follows the Draft 4 specification and simply declares the types expected for each field in the request. 

For more details consult this guide.

Sending Request Body can be other than JSON in API Gateway in AWS

Can you accept a form request e.g. the classic application/x-www-form-urlencoded body content type. Answer is yes.

You could even use application/xml or any other format from your request but you have to tweak some settings.

Default mapping template in response:

{

    "body" : $input.json('$')

}

Now, if you send a typical application/JSON body…

{

    "foo": "bar"

}

you’ll get is a JSON object under the body key:

{

    "body" : {

       "foo": "bar"

    }

}

Now if you send a different format, say some XML you’ll receive the body key as a string:

{

    "body" : "my request body"

}

However, if you do so then you need your lambda to do the parsing further.

And Ah! ofcourse you need to redeploy your Api gateway after above changes.

Cheers :)

Parsing Json in Java using JsonParser

You can use one of the many available Json Parser for the purpose. I have personally used following in simple applications. You can refer this tutorial:

 

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

import org.json.simple.parser.JSONParser;

import org.json.simple.parser.ParseException;

 

You might need to install dependencies first:

In case you are on maven, use following to set a proper environment for the compiler, in order to recognize the JSON's classes. If you want to built your project via Maven, you should add the following dependency to your pom.xml:

1 2 3 4 5

<dependency>     <groupId>com.googlecode.json-simple</groupId>     <artifactId>json-simple</artifactId>     <version>1.1</version> </dependency>

Otherwise, you have to add the newest version of json-simple-1.1.1.jar in your CLASSPATH.

First you need to Declare an instance of the JSONParser:

 JSONParser parse = new JSONParser(); 

Then, Convert the string objects into JSON objects:

 JSONObject jobject = (JSONObject)parse.parse(inline); 

If you view the JSON structure, it will be something like this:

{

   "results" : [

      {

   "place_id" : "aa1123",

         "types" : [ "locality", "book" ]

      } ]

}

Then you can convert the JSON object into JSONArray 

JSONArray jsonarray = (JSONArray) jobj.get(“results”); 

Now you can use as per your need, for eg.

get the elements within the results array. Here is how you do it:

//Get data for Results array

for(int i=0;i<jsonarray.size();i++)

{

//Store the JSON objects in an array

//Get the index of the JSON object and print the values as per the index

JSONObject jsonobj_1 = (JSONObject)jsonarray.get(i);

System.out.println(“Elements under results array”);

}