XMLHttpRequest cannot load. Unloaded resources show caution: Provisional headers are shown

Question

I actually don't know the right title for this question, because of I've found many similars but still couldn't figure the solution out.

My problem is that (on Chrome) the website I've working on remain showing console log: XMLHttpRequest cannot load http://resource.domain.com/file.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.my-site-url.tld' is therefore not allowed access.

I've tried to allow that resources via .htaccess files using this code.

<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin http://wp.com,http://ajax.googleapis.com,http://fonts.googleapis.com,http://zor.fyre.co
    Header set Access-Control-Allow-Credentials true
</IfModule>
</FilesMatch>

Doesn't work. I've also tried php and jsonp version.

Anyone please help me to fix this issue.

Additional info: Lately, in inspect elements > Networks > Headers section, I found this message:

Answer 1

Your issue most likely stems from the fact that you are trying to load content from an external domain, which is prohibited in a normal json call hence the No 'Access-Control-Allow-Origin' error. The technique you may need is known as JsonP. I would link the documentation; however, it really can depend on the javascript framework you are using. I recommending reviewing this post for a walk-through on how to invoke this behaviour via normal JS. https://stackapps.com/questions/891/how-to-call-the-api-via-jsonp-in-plain-old-javascript

Hope this helps!