Develop Reference

WordPress publishing failed; javascript shows errors 'Access to fetch ... has been blocked by CORS policy'

I have uploaded WordPress manually on freewebhostingarea.com using my own domain. When I create a new page in Wordpress, I get some errors in javascript console (attached image1) but it lets me add/edit content. When I try to publish the page, I get the error 'Updating failed' and javascript console gives additional errors (attached image2) as below:
"Access to fetch at 'http://e.freewebhostingarea.com/not-found.html' (redirected from 'http://www.shia-match.com/wp-json/wp/v2/pages/16/autosaves?_locale=user') from origin 'http://www.shia-match.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
What could I be doing wrong?
Errors when creating a new WordPress page,
Errors when trying to publish page

Just had this same problem, the cross origin (CORS) policy blocking fetching by the https:// version of a site from the https://www version.
mediaguru’s answer alerted me to check the wp-config file. I found that I had added these lines, and so removed them:
define('WP_HOME', 'https://www.example.com');
define('WP_SITEURL', 'https://www.example.com');
I then rechecked WP’s Settings > General > WordPress Address (URL) and Site Address (URL). Prior to my edit of the wp-config file, they had displayed the www URL, but greyed out and non-editable. Now they had both reverted to the non www version of the URL (and were editable).
On my (Dreamhost) server, the canonical URL is set to www. So I changed the Settings > General URLs to www and… bingo. Solved.

It sounds like you just copied your wordpress files and db from one location to another? If so, you will need to change settings in your wordpress config as well as in your database to make sure the new location is not referring to the old location's database or files.

Permanent Solution for "No 'Access-Control-Allow-Origin' header is present on the requested resource"

I have seen this problem quite a few times and it pops up time and again. This is a CORS(i.e. Cross origin request issue).The exact error I got this time is as follows:
XMLHttpRequest cannot load
https://myURL/myappdomain.subdomain.qual1/$count. Response to preflight request doesn't pass access control check: 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 401.
Following are the possible solutions I have worked out in past. But they dont always work. They are URL specific solutions:
1) Having CORS plugin on chrome installed
2) Disabling web security from command line "--disable-web-security"
3) using 'jsonp' as format instead of 'json'
4) toggling cross-origin to "true" or "false".
Questions I need answer for
1) Why do we get this error? Is it something that the Server is imposing on the client pages?
2) What is the safest way to solve this? i.e. The method in which there is not security vulnerability and a reliable method.
3) Why cors is never an issue for API calls made from within nodeJS code?

XMLHttpRequest cannot load - Origin 'null' is therefore not allowed access

I am doing a login to connect through a service layer to a Linux server that has sap b1, and I get the following error.
XMLHttpRequest cannot load https://hanab1:50000/b1s/v1/Login. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'null' is therefore not allowed access.
I find from google chrome and despite attempts, always the same error is generated, the funny thing is that when we perform the video https://www.youtube.com/watch?v=ilDH8nhnp4o,I get the error above dimensioned, but when I enter the URL directly the next line https://hanab1:50000/B1S/v1, see I have access to all information.
If anyone can help me in advance I thank you for your collaboration and interest.

In simple words, you cannot. To enable the Access Control, you need to change the way, the server sends you the headers. If your server is a PHP based one:
<?php
header("Access-Control-Allow-Origin: *");
And for SAP (if it uses Apache), the headers should be:
Header set Access-Control-Allow-Origin "*"
You can learn for other servers from here: I want to add CORS support to my server.

No 'Access-Control-Allow-Origin' header is present on the requested resource on AJAX request

I'm using JQuery:
$('#myDiv').load('myApp/url',function(){ });
and it's giving No 'Access-Control-Allow-Origin' header is present on the requested resource By chrome, and firefox so far , any straight forward answer on how to fix this . I don't have control over server to make any configurations and I'm using PHP

This is a CORS issue (Cross Origin Resource Sharing), you are trying to request content via ajax from two different domains. Unless the domain from where you want to grab the data has properly set the CORS headers, browsers will cancel the request right away.
This occurs due to the communication between two different domains. The domain that will server your data, should have some headers set, this headers act as permissions, they tell which domains are allowed to ask for data from it, and which verbs/methods are allowed.
You can read more about this here and here

No, there won't be a straight forward answer to this because it will depend entirely on your system/server setup, and what you have access to. Here's what you need to know.
In the beginning -- AJAX requests had a very strict "same origin" policy. This meant if you made an ajax request FROM a website with the domain example.com, you could only make a request to a URL that was on example.com.
In more recent years browsers have loosened up on this. If the server that you're making a request to has an Access-Control-Allow-Origin header, and that header includes the URL/domain of the server you're making the request from, then the request will be allowed. Similar question/answer here.
So, how you set this header depends on the server you're making a request to. If you have control over this server, start your Googling there.
If you don't have control over this server, you need to make a request to php page on your server, and this PHP page should make a curl request to the server that had the information you don't. A curl request, happening outside the browser, isn't subject to the same cross domain issues.

The easy way is to do this by hand:
var script = document.createElement('script');
script.src = uri;
script.id = 'scriptid';
document.head.appendChild(script);
It may be some browser compatibility issues, but you get the power of CORS with no 'Access-Control-Allow-Origin' error

XMLHttpRequest cannot load.?

I by chrome->Inspect element->console get this error:
XMLHttpRequest cannot load. Origin is not allowed by
Access-Control-Allow-Origin.
What is this resolved?

You cannot issue requests through the XMLHttpRequest to other domains or subdomains.
If you are issuing the request from www.foo.com you also need to target the request at www.foo.com and not leave out the www.
If you really need to hit another domain you can use JsonP where the browser utilizes the <script> tags ability to load scripts from a different domain. The loaded script then executes a callback function to give you the data. But for regular AJAX calls you cannot leave the source domain at all.
See the Wiki article on Same Origin Policy

one work around is using Korz which routes all cross origin requests through a third party and sets Access-Control-Allow-Origin header to '*' so the request goes through.

I recommend you to read this:
http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/
It is very wel explained... the whole point is that you need to return your JSON in a callback-function way