How to fix the 'Missing required request header. Must specify one of: origin,x-requested-with' Ajax Error

Question

I'm trying to run an ajax call from my local machine to an external URL using the CORS anywhere url prepended to the actual url/endpoint. However, it's resulting in the 'Missing required request header. Must specify one of: origin,x-requested-with' error. I've manually set my header as you can see below in the code, I just can't quite understand why this would still be occurring after explicitly defining the 'requested-with' value.

        // Set URL to the Create patient endpoint
        const Url = 'https://cors-anywhere.herokuapp.com/https://staging.micromerchantsystems.com/mmsgatewayapistaging/api/patient/create';

        // Define User data here ** Currently static information **
        // Need to set variables based on input value to the correct identifier
        // EX: "FirstName": $('#first_name').val();
        const userData = {
            "RequestingClient": {
                "ClientId": "XXXXXXXXXX",
                "ClientSecret": "XXXXXXXXXX",
                "MemberId": "XXXXXXXXXX"
            },
            "Pharmacy": {
                "IdentifierType": 2,
                "Identifier": "5164086800"
            },
            "LastName": "Test",
            "MiddleInitials": "X",
            "FirstName": "Seth",
            "Gender": "M",
            "DOB": "01/01/1990",
            "Email": "[email protected]",
            "PhoneNumber": "1234567890",
            "MobileNumber": "1234567890",
            "BusinessNumber": "1234567890",
            "PatientIdentifiers": [
                { "IdentifierType": 1, "IdentifierType": "12345" }
            ],
            "AddressInformation": {
                "AddressType": 1,
                "StreetLine1": "123 Test",
                "StreetLine2": "",
                "City": "Waco",
                "State": "TX",
                "ZipCode": "76710",
            },
            "ExternalPatientId": "1234567890",
            "Timestamp": "2019-12-09T17:59:15.7624947Z"
        };

        // On button ajax call to create a new user with the above data
        $('.btn').click(function () {
            $.ajax({
                url: Url,
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                // set the request header authorization to the bearer token that is generated
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                    "Authorization": "Bearer " + responseToken,
                },
                data: userData,
                success: function (result) {
                    console.table(result);
                    $('.output_userInfo').html(result.ErrorMessage);
                },
                error: function (error) {
                    console.log(`Error ${error}`)
                },
            });


        });

Answer 1

You are setting the header correctly, however according to the author of cors-anywhere, you can experience errors related to making requests (even after setting the appropriate headers) for the following reasons:

• The URL that you want to proxy is unreachable (e.g. the site is down, or they have blocked access to the CORS Anywhere IP).
• Too many requests have been sent to CORS Anywhere by the given origin within the given time frame (#45).
• The URL itself is blacklisted (e.g. #32, #42).
• CORS Anywhere is down. (i.e. this is applicable if you are self hosting)

Based on making a request to your target URL (https://staging.micromerchantsystems.com/), I'm getting an IIS splash screen, so you may want to verify that everything is running on your end. Using a very minimal example below, I was able to seemingly hit the correct site, however received a 401 error, indicating that I was unauthorized (but I didn't receive the 400 header required message):

$(function() {
  $.ajax({
    url: "https://cors-anywhere.herokuapp.com/https://staging.micromerchantsystems.com/mmsgatewayapistaging/api/patient/create",
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    // set the request header authorization to the bearer token that is generated
    headers: {
      "X-Requested-With": "XMLHttpRequest"
    },
    success: function(result) {
      console.log(result);

    },
    error: function(error) {
      console.log(`Error ${error}`)
    },
  });
});

I'd imagine if you include your appropriate authorization information, you should be able to access it. If you are still encountering issues, you may want to consider reaching out to the author who can likely help with troubleshooting the issue further.

Answer 2

I did a bit more digging into the Postman code that was able to run successfully and got the correct answer from that. Here's the code I used to correctly run the API and pass the information cross-domain.

        // Set URL to the Create patient endpoint        
        const Url = "https://cors-anywhere.herokuapp.com/https://staging.micromerchantsystems.com/mmsgatewayapistaging/api/patient/create";

        // On button ajax call to create a new user with the above data

        $('.btn').click(function () {
            // The input value variables NEED to be defined and set after the click function
            // so that the value can be received and passed into the userData variable.

            // Define User data here ** Currently static information **
            // Need to set variables based on input value to the correct identifier
            // EX: "FirstName": $('#first_name').val();
            var user_firstName = $("#first_name").val();

            const userData = {
                "RequestingClient": {
                    "ClientId": "XXXXXX",
                    "MemberId": "XXXXXXX"
                },
                "Pharmacy": {
                    "IdentifierType": 2,
                    "Identifier": "XXXXXXX"
                },
                "LastName": "Test",
                "MiddleInitials": "X",
                "FirstName": user_firstName,
                "Gender": "M",
                "DOB": "01/01/1990",
                "Email": "[email protected]",
                "PhoneNumber": "1234567890",
                "MobileNumber": "1234567890",
                "BusinessNumber": "1234567890",
                "PatientIdentifiers": [
                    { "IdentifierType": 1, "IdentifierType": "12345" }
                ],
                "AddressInformation": {
                    "AddressType": 1,
                    "StreetLine1": "123 Test",
                    "StreetLine2": "",
                    "City": "Waco",
                    "State": "TX",
                    "ZipCode": "76710",
                },
                "ExternalPatientId": "1234567890",
                "Timestamp": "2019-12-09T17:59:15.7624947Z"
            };

            // Using stringify is an important part in successfully passing the data
            var userString = JSON.stringify(userData);



            var userSettings = {
                "async": true,
                "crossDomain": true,
                "url": Url,
                "method": "POST",
                "headers": {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer " + responseToken,
                    "Accept": "*/*",
                },
                "data": userString
            }

            $.ajax(userSettings).done(function (response) {
                console.table(response);
            });
        });