Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Access-Control-Allow-Headers - Cross-Origin Request Blocked

Featured Lock Resolved
Hi, I'm loading a module in SPPB, this module gets data from an API using ajax. The module has been tested on local and remote, http and https. When I publish the module on the same website but on a page that does not load SPPB, it works correctly; That's why I ask here.

This is the code: I am using jquery, with php using file_get_content it is possible but I must use jquery.

jQuery.ajax({
url : 'https://api.coincap.io/v2/assets',
type : 'GET',
dataType:'json',
success : function (data){
console.log(data);
}
})

This is the header that the API returns

Array ( [0] => HTTP/1.1 200 OK [1] => Date: Tue, 12 Nov 2019 15:34:15 GMT [2] => Content-Type: application/json; charset=utf-8 [3] => Connection: close [4] => Set-Cookie: __cfduid=de699e8b34d4188a46c66a5261965bd021573572854; expires=Wed, 11-Nov-20 15:34:14 GMT; path=/; domain=.coincap.io; HttpOnly [5] => X-Powered-By: Express [6] => X-RateLimit-Limit: 180 [7] => X-RateLimit-Remaining: 173 [8] => Access-Control-Allow-Origin: * [9] => Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding [10] => ETag: W/"4bd9-3F9ImaVKlhKStu7rqvlUCEKSvyw" [11] => Vary: Accept-Encoding [12] => CF-Cache-Status: DYNAMIC [13] => Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" [14] => Server: cloudflare [15] => CF-RAY: 534991a3de03162d-LIM )

These are the errors that the log shows

Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel


Reason: CORS request did not succeed


Help to discover and solve why it doesn't work within SPPB?

13 Answers

Alvaro

More than a month ago #Permalink
Thanks for the help, here I leave the solution for others who have the same problem (maybe there is a better way to do it, but this works for me)

delete $.ajaxSettings.headers["X-CSRF-Token"];
$.ajax({
.................
})
$.ajaxSettings.headers["X-CSRF-Token"] = Joomla.getOptions('csrf.token');

Remove the header, run ajax, add the header again

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for your query. Your query is very important to us. Let me know that, does allow_url_fopen it enable or disable?

-Thanks

Alvaro

More than a month ago #Permalink
It's activated, but I don't think it has anything to do with jQuery. As I mentioned using php I can get the data without problems, but I must do it in jquery because I must show dates and times of the client (user's computer). this is the full message that firefox shows:

reason: token 'x-csrf-token' not present in the CORS header 'Access-Control-Allow-Headers' of the preorder CORS channel).


As I repeat, it only happens when it is executed together with SPPB. I have also read another post with CORS problems, here in the forum that has no solution. You know the SPPB scripts more than we do, in order to detect this conflict.

Thanks

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Thanks for your explanation. I checked the loading of Module addon inside the page builder. But, No problem found. Is it possible to share with me the third party module name (which you inserted into the module addon)? Besides, I would request to you that, please capture a screencast video when you have got this problem.

-Thanks

Alvaro

More than a month ago #Permalink
Hello, well I discovered that the problem is generated by the following script

;(function ($) {
$.ajaxSetup({
headers: {
'X-CSRF-Token': Joomla.getOptions('csrf.token')
}
});
})(jQuery);

This script is only present on pages created with SP page builder, I suppose it is necessary for its operation.
In the Headers configuration of the API, X-CSRF-Token is not present.
You know how I can overwrite or destroy ajaxsetup() so that it does not request X-CSRF-Token from the API.
please help me with a solution

Toufiq - Staff

More than a month ago #Permalink
Hi there,

Please create an issue on your site & provide us your access via private message. I will forward it to our developer team.

-Thanks

Miguel

More than a month ago #Permalink
Thanks for the help, here I leave the solution for others who have the same problem (maybe there is a better way to do it, but this works for me)

delete $.ajaxSettings.headers["X-CSRF-Token"];
$.ajax({
.................
})
$.ajaxSettings.headers["X-CSRF-Token"] = Joomla.getOptions('csrf.token');

Remove the header, run ajax, add the header again
Hi, where you put the code?

Toufiq - Staff

More than a month ago #Permalink
Thanks for the help, here I leave the solution for others who have the same problem (maybe there is a better way to do it, but this works for me)

delete $.ajaxSettings.headers["X-CSRF-Token"];
$.ajax({
.................
})
$.ajaxSettings.headers["X-CSRF-Token"] = Joomla.getOptions('csrf.token');

Remove the header, run ajax, add the header again
Hi, where you put the code?


Hi there, Remove the code. Thanks

Alvaro

More than a month ago #Permalink
Thanks for the help, here I leave the solution for others who have the same problem (maybe there is a better way to do it, but this works for me)

delete $.ajaxSettings.headers["X-CSRF-Token"];
$.ajax({
.................
})
$.ajaxSettings.headers["X-CSRF-Token"] = Joomla.getOptions('csrf.token');

Remove the header, run ajax, add the header again
Hi, where you put the code?


in your script.js where you are making the ajax call

Toufiq - Staff

More than a month ago #Permalink
Thanks for the help, here I leave the solution for others who have the same problem (maybe there is a better way to do it, but this works for me)

delete $.ajaxSettings.headers["X-CSRF-Token"];
$.ajax({
.................
})
$.ajaxSettings.headers["X-CSRF-Token"] = Joomla.getOptions('csrf.token');

Remove the header, run ajax, add the header again
Hi, where you put the code?


in your script.js where you are making the ajax call


Hi, Mainly the header request blocked by the hosting server. We don't recommend to remove the code. Thanks

Miguel

More than a month ago #Permalink
I put the code and the module works but Sp page builder is useless (invalid token)

Alvaro

More than a month ago #Permalink
The problem is that no API will include X-CSRF-Token in the list of allowed headers.
They are telling us that we should not delete the code, but what the code I put here does is, delete the header, execute the ajax and immediately recreate the deleted header. It is the solution that I propose. What solution do Joomshaper developers propose? because this problem will happen every time you want to run ajax to get data from an API, along with sp page builder.


There are no replies made for this post yet.
Be one of the first to reply to this post!

122

Templates

320326

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us