No 'Access-Control-Allow-Origin' header is present

REST API
1

I have created a service on dreamfactory and I’m trying to access it from my Kendo UI app. This is the portion of the code:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://dsp-droldan01-49722.cloud.dreamfactory.com/rest/sql/detalle?app_name=**api_key**",
                
                type: "GET",
                                                           dataType: "json",
                                                           crossDomain : true,
                                                           beforeSend: function(req) {
                                                                          req.setRequestHeader("Access-Control-Allow-Origin:", "*"),
                                                                          req.setRequestHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"),
                                                                          req.setRequestHeader("Access-Control-Allow-Headers", "X-ACCESS_TOKEN, Access-Control-Allow-Origin, Authorization, Origin, x-requested-with, Content-Type, Content-Range, Content-Disposition, Content-Description")
                                                                        
                                                                          },
        }
    }

But I got an error:

GET https://dsp-droldan01-49722.cloud.dreamfactory.com/rest/sql/detalle?app_name=api_key b.ajaxTransport.send @ jquery.min.js:5b.extend.ajax @ jquery.min.js:5ct.extend.read @ kendo.all.min.js:11(anonymous function) @ kendo.all.min.js:11lt.extend._queueRequest @ kendo.all.min.js:11lt.extend.read @ kendo.all.min.js:11lt.extend.query @ kendo.all.min.js:11lt.extend._query @ kendo.all.min.js:11(anonymous function) @ kendo.all.min.js:11b.extend.Deferred @ jquery.min.js:3lt.extend.fetch @ kendo.all.min.js:11j.extend.init @ kendo.all.min.js:22(anonymous function) @ kendo.all.min.js:10b.extend.each @ jquery.min.js:3b.fn.b.each @ jquery.min.js:3yt.plugin.e.fn.(anonymous function) @ kendo.all.min.js:10(anonymous function) @ index.html:39b.Callbacks.c @ jquery.min.js:3b.Callbacks.p.fireWith @ jquery.min.js:3b.extend.ready @ jquery.min.js:3H @ jquery.min.js:3

index.html:1 XMLHttpRequest cannot load https://dsp-droldan01-49722.cloud.dreamfactory.com/rest/sql/detalle?app_name=api_key. 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 403.

2

How have you configured CORS?

3

No, how can I do this on my project side? do you have a sample? I’m using JSON get call out type.

Thank you

4

CORS is configured in your instance of DreamFactory, under Config. We provide a GUI component to configure it. If you absolutely must set this configuration from your app, then the app must authenticate as a full admin and POST the desired CORS configuration to /rest/system/config. You can see the proper format and possible configuration values in API Docs under POST /system/config setConfig().

5

I configured the CORS on my dreamfactory but I have another issue right now.

GET https://dsp-droldan01-49722.cloud.dreamfactory.com/rest/sql/detalle?app_name=api_key 403 (Forbidden)

This is my code:

  read: {
				url: "https://dsp-droldan01-49722.cloud.dreamfactory.com/rest/sql/detalle?app_name=**api_key**",
                type: "GET",
				dataType: "json",
				
				 beforeSend: function (xhr) {
   					xhr.withCredentials = true;
   					xhr.setRequestHeader('Authorization', 'Basic droldan01@hotmail.com:password');
				}
        }

I configured the access to guest and from a chrome browser I’m able to retrieve the JSON. Any ideas?