How do I set AJAX CORS?

0 favourites
  • 3 posts
From the Asset Store
10 Beautiful Pokemon-like Building Pixel Art Sprite Sets
  • Hello

    I have made a simple api. I can call it using url in the browser, and I can use Postman to call it. No authentication required.

    The server is allowed to accept any origin:

    Header set Access-Control-Allow-Origin "*"

    Yet, C3 AJAX keeps telling me:

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [...]. (Reason: CORS preflight response did not succeed). Status code: 422.

    Please help !

    Thank you :)

    Tagged:

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • So I have used scripts. AJAX plugin is still not working, but the script works!

    The script dynamically loads ajax script from cdn at the start, and when the CallAPI function is called, it uses the ajax object to call the api.

    Here is the full code:

    const dependenciesURL = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    
    // Load a script and append it to the document
    const LoadScript = (scriptUrl) =>
    {
    	return new Promise((resolve) =>
    	{
    		const script = document.createElement("script");
    		
    		script.addEventListener("load", () => resolve(true));
    		script.addEventListener("error", () => resolve(false));
    
    		script.src = scriptUrl;
    
    		document.body.appendChild(script);
    	});
    }
    
    // Load all project dependencies
    async function LoadDependencies()
    {
    	const sdkAvailable = await LoadScript(dependenciesURL);
    
    	if (sdkAvailable)
    	{
    		console.log("Dependencies ready");
    		
    		InitializeDependencies();
    	}
    	else
    	{
    		console.log("Dependencies not available");
    	}
    }
    
    // Initialize variables
    function InitializeDependencies() {
    	console.log("InitializeDependencies");
    }
    
    // Call the loading functions
    LoadDependencies();
    
    function CallAPI(_type, _url, _data){
    	$.ajax({
    		 type: _type, // GET
    		 url: _url,
    		 data: _data,
    		 
    		 cache: false,
    		 
    		 success: function(response) {
    		 	console.log(response);
    		 }
    	});
    }
    

    So the api works using the browser, postman, and javascript, but not the AJAX plugin. Any idea what is going on here?

    Thank you!

  • OK, I managed to get the AJAX plugin to work!

    The solution was to remove ALL "Set Request Header" actions, even for "Content-Type".

    Now using PostToURL action (with Method="GET"), or RequestURL action (and passing parameters in the url), Work!

    What I don't understand is, why did the headers cause the issue??

    Even after allowing the Content-Type header on the server, setting Content-Type header using AJAX plugin always causes the CORS issue again.

    Header set Access-Control-Allow-Headers "Content-Type"

    Thank you!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)