0

What I'm trying to accomplish is to add a form which the developer has built. The hosting environment is pretty complicated - on the server there is an ISS VM running the all client's services (This is where member's manage their accounts, and where the data lives for the form I'm trying to add.).

The Wordpress website I built is running on a Linux VM on the same server. We're having cross-origin errors when the form tries to reach the data on the ISS server. I'm out of my depth here and the company which maintain the ISS server (And who built this form) are reluctant to assist further.

You can view the test-form on the ISS server here. The webpage where I'm trying to implement this can be viewed here.

The errors i'm receiving in the console are as follows:

*Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.nationalhealthcare.co.za:8443/AjaxCall.asmx/ParseData. (Reason: header ‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.nationalhealthcare.co.za:8443/AjaxCall.asmx/ParseData. (Reason: CORS request did not succeed).*

The form's code which the developer has shared is as follows:

                    <div class="contactUsContentCol">
                        
                        <label for="pracType">Practice Type:</label>
                        <select id="pracType" type="number" name="pracType" required>
                            <option value="">...none chosen...</option>
                        </select>
                    </div>                  
    <script>
        var netProvObj = [];

        $(document).ready(function () {
            PracTypeFill();                    
        });

        function PracTypeFill() {
            var JSONObject = {
                URL: "dd/practypes"
            };

            $.ajax({
                type: "POST",
                url: "https://www.nationalhealthcare.co.za:8443/AjaxCall.asmx/ParseData",
                data: JSON.stringify(JSONObject),
                headers: {
                    'content-type': 'application/json'
                },
                dataType: "json",
                success: function (data) {
                    data = JSON.parse(data.d);
                    if (data[1] === "true") {

                        var length = data[0].length;

                        for (var i = 0; i < length; i++) {
                            $('#pracType').append(
                                "<option value='" + data[0][i].pracType + "'>" + data[0][i].descr + "</option>"
                            );
                        }
                        $('#pracType').val("14"); //Default to be a General practicioner
                    }                
                },
                error: function (xhr, status, error) {
                    var errObj = JSON.parse(xhr.responseText);
                    var errDesc = errObj["description"];
                    console.log('error');

                    if (errObj["name"] === "BusinessException") {
                        DisplayMsg('error', errDesc);

                        netProvTableReset();
                    } else {
                        alert("Major error " + errDesc);
                        netProvTableReset();
                    }
                }
            });
        };
    </script>

The developer also instructed the below script to be added to the page header:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

The headers I shared in my original post is the only part of the instructions from the developer which I have yet implemented:

headers: {
    'content-type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range',
    'Access-Control-Expose-Headers': 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range'
},

Thank you

Matt van Onselen
  • 1
  • 2

1 Answers1

0

What the dev sent you isn't code to be put in an html header, but rather the header of a response to an HTTP request.

The headers you posted would be appropriate for an API endpoint to return. content-type tells the requesting client that the content of the response will be in json format. The other headers are CORS headers controlling what kind of requests will be allowed to access the endpoint.

Are you trying to set up an API endpoint of some sort? The header itself says that it's returning json, so there's no way that this is meant for any part of your website that returns an html page.

wwsalmon
  • 156
  • 13