How do I set AJAX CORS?

Post reply

❤Follow Topic(2)

0 favourites

3 posts

From the Asset Store

Winter 2D game complete set

$7 USD

A whole set you need to create a gorgeous winter 2d game

mpatekar

- Delphawi
- - Joined 3 Dec, 2013
  - 34 topics • 111 posts
- 1
- 1 Apr, 2022
- Quote
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:

ajax
cors
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads

Delphawi
- Joined 3 Dec, 2013
- 34 topics • 111 posts
1

1 Apr, 2022
Quote

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!

- Delphawi
- - Joined 3 Dec, 2013
  - 34 topics • 111 posts
- 1
- 1 Apr, 2022
- Quote
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!