Failed to crop image — CORS Policy issue

I downgraded to 4.1.4, as someone else mentioned in the support forum. Everything works now. Hopefully you can update the plugin soon to fix this issue. Thanks!

Hey, there shouldn’t be a CORS issue unless you are accessing the site from another domain. Could you check that the site URL in the browser URL bar matches exactly the one in the error message? It should have the same domain, protocol, and subdomain.

In the latest version, there is an option to enable REST API compatibility mode which should avoid this error.

But I’m eventually planning to make the REST API mandatory to improve the plugin code maintainability. So it would be better to fix any possible server issues with the REST API so future versions of the plugin will continue to work.

Hey, really appreciate you getting back to me so quickly. Impressive to say the least. Good support goes a long way!

To give you a little background about our site — Our site is custom php (static), and we use wordpress to feed certain/specific sections on the site. So, wordpress is installed in a different directory than the other site files. www.***.com vs. admin.***.com.

It looks like the error message is showing www.***.com, when wordpress is within admin.***.com

• This reply was modified 3 years, 3 months ago by bobby.noonan.

OK, that should rule out any problem with the origin.

Are you using the WordPress REST API in any other way? For example, the Gutenberg editor uses the REST API?

Another thing you could check is the HTTP status code of the REST API request. Sometimes there can be Apache/Nginx rewrites that interfere with REST API by sending the wrong status code, for example, 301 or 302 instead of 200.

I don’t believe we are using REST API in any other way. Super weird. I’ve tried creating some CORS rules within .htaccess, but to no avail.

There was another person that was running into a similar issue: https://www.ads-software.com/support/topic/failed-to-crop/

One of the errors I am seeing is:

`Access to XMLHttpRequest at ‘https://www.***.com/wp-json/aiarc/v1/crop’ from origin ‘https://admin.***.com’ has been blocked by CORS policy: Request header field x-aiarc-nonce is not allowed by Access-Control-Allow-Headers in preflight response.

Here is a screen shot the error I mentioned above: https://ibb.co/nBD2yz6

Could you check the network tab and tell me the HTTP status code for the request(s)?

all of the items in red within the network tab are:

11645 – 404 – xhr – VM31946:1
crop – CORS error – xhr – VM31946:1

Access to XMLHttpRequest at ‘https://www.***.com/wp-json/aiarc/v1/crop’ from origin ‘https://admin.***.com’ has been blocked by CORS policy: Request header field x-aiarc-nonce is not allowed by Access-Control-Allow-Headers in preflight response.

At least this error is caused by the mismatch of HTTP origins, since https://www.***.com/ and https://admin.***.com are different origins.

Could you try to add the following code to your theme and see if it fixes the issue?

add_filter('rest_pre_echo_response', function ($value) {
    header('Access-Control-Allow-Origin: *', true);
    return $value;
});

• This reply was modified 3 years, 2 months ago by joppuyo.
• This reply was modified 3 years, 2 months ago by joppuyo.

You could also add the following code in addition to the previous one and see if it helps:

add_filter('rest_allowed_cors_headers', function ($headers) {
    array_push($headers, 'X-Aiarc-Nonce');
    return $headers;
});

I tried that, no luck. I also tried:

?add_filter( 'wp_headers', 'send_cors_headers', 11, 1 );
function send_cors_headers( $headers ) {
    $headers['Access-Control-Allow-Origin'] = $_SERVER[ 'HTTP_ORIGIN' ];
    return $headers;
}

Here is another screen shot of the dev console:
https://ibb.co/CV5gJt1

Thanks again for taking the time to try and help. I’m hoping that if we figure out the issue, it might help someone else down the line.

Alright, are you saying that https://www.***.com/ doesn’t have WordPress installed at all? So the plugin is calling a REST API that does not exist?

Can you check https://www.***.com/wp-json and check what it returns? And then check https://admin.***.com/wp-json and do the same thing?

www.***.com/wp-json doesnt have anything. admin.***.com/wp-json has code

Okay, that means there’s something weird going on with the site configuration.

But might be able to fix it with this filter:

add_filter('rest_url', function() {
    return 'https://admin.***.com';
});

• This reply was modified 3 years, 2 months ago by joppuyo.

got rid of that error code, but now I’m seeing:

VM139754:1 GET https://admin.***.com/aiarc/v1/get/12807 404

https://ibb.co/KFbqhV0

• This reply was modified 3 years, 2 months ago by bobby.noonan.