Thread Details
  • State Verified Answer
  • Replies 4 replies
  • Subscribers 352 subscribers
  • Views 27341 views
  • Users 0 members are here
Forum Actions
Related

AJAX to Sugar REST blocked by CORS

Artis Plocins

I tried sending an AJAX request with jQuery to a SugarCRM REST endpoint, but it was blocked by Cross Origin Resource Sharing and returned HTTP 404 along with an error.

This is the AJAX request:

$.ajax({
        type: 'POST',
        url: 'https://example.sugarinstance.com/rest/v10/Cases/web/submit',
        data: jsonData,
        dataType: 'json',
        contentType: 'application/json',
        success: function(response) {
          console.log('SUCCESS')
          console.log(response)
        }
      })

And this is the error returned:

XMLHttpRequest cannot load https://example.sugarinstance.com/rest/v10/Cases/web/submit. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

This is the endpoint I created just to test without authentication since it was not working at all:

<?php

class Web2CaseApi extends SugarApi
{
    public function registerApiRest()
    {
        return array(
            'Web2CaseEndpoint' => array(
                'reqType' => 'POST',
                'noLoginRequired' => true,
                'path' => array('Cases', 'web', 'submit'),
                'method' => 'newCase',
                'shortHelp' => 'Receives JSON data for a new Case record',
            ),
        );
    }
    public function newCase($api, $args)
    {
        return $args;
    }
}

This endpoint now appears in the API help, so it definitely exists.

How am I supposed to use AJAX to send data to SugarCRM if it is blocked?
Should the server be set to allow CORS by default?

I also tried these options in the jQuery AJAX request to no avail:

crossDomain: true,
headers: {
  'Access-Control-Allow-Origin': '*'
},
Parents
  • 0

    This is happening because of the CORS 3 (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

    JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com, and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

    Localhost

    If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

    Access-Control-Allow-Origin: http://localhost:9999

    Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:

    <script>
    $.support.cors = true;
    </script>

Reply
  • 0

    This is happening because of the CORS 3 (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

    JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com, and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

    Localhost

    If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

    Access-Control-Allow-Origin: http://localhost:9999

    Also, this kind of trouble is now partially solved simply by using the following jQuery instruction:

    <script>
    $.support.cors = true;
    </script>

Children
No Data