CORS not working for images in wp-content/uploads folders

Hello @rogerskk,

Thank you for reaching out. 

I believe the plugin has successfully enabled CORS. You can verify this by using the test link. If you want to check whether an image is shared or not, you can do so using this test.

The CORS error you’re encountering is due to the origin motiontees.com being added. You can think of the origin as the website domain. So, you’re sending store.motiontees.com from the cors-test.codehappy.dev domain. and your settings allowed motiontees.com

The root domain and API are passed because the plugin has added a temporary server configuration to bypass your main server configuration. This allows requests that have a specific extension like .jpg, .mp4, etc., as per your settings. and root or API URL does not have any extensions.

Another test you could perform involves disabling all other plugins, leaving only this one active. Then, observe how it performs. According to this thread, the issue seems to have been caused by another plugin.

If the issue persists, it’s possible that your ASP.NET server doesn’t allow temporary server configurations. In this case, you’ll need to modify your server’s configuration settings for images.

Let me know if you need help with anything else! ??

FYI: I’m marking this issue as resolved for now. However, feel free to add more replies to this thread at any time. I’ll respond as soon as I can, based on my availability, and assist with any further questions you may have.

store.motiontees.com is the WordPress site where the plugin is installed and that is where the images are that I need to load in motiontees.com. Below is the error I receive. Any more suggestions to allow the sharing of the wordpress images?

Access to image at ‘https://store.motiontees.com/wp-content/uploads/2023/12/DSC_6698.jpg’ from origin ‘https://motiontees.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

?You can uninstall this plugin as it will not provide any benefits for you.

• This reply was modified 10 months, 2 weeks ago by Dev Kabir.
• This reply was modified 10 months, 2 weeks ago by Dev Kabir.

So I was able to get this to work by adding this to my functions.php in WordPress to return the images by passing the url. Hopefully it will help someone else who is getting the CORS error trying to return images to another site:

add_action( ‘rest_api_init’, function () {
register_rest_route( ‘loadImage’, ‘/content/’, array(
‘methods’ => ‘GET’,
‘callback’ => ‘fetchImage’,
) );
} );

function fetchImage($data) {
$url = $data->get_param(‘url’);
$info = getimagesize($url); // get image data
header(“Content-type: “. $info[‘mime’]); // act as image with right MIME type
readfile($url); // read binary image data
die();
}

Thank you so much for sharing your solution with the community!

I appreciate your proactive approach in finding a resolution to the CORS issue when returning images to another site.

// Register a custom REST API endpoint when the rest_api_init action is triggered
add_action('rest_api_init', function () {
    // Define a REST route under the 'loadImage' namespace with the path '/content/'
    // Set the HTTP method to 'GET' and specify the callback function as 'fetchImage'
    register_rest_route('loadImage', '/content/', array(
        'methods' => 'GET',
        'callback' => 'fetchImage',
    ));
});

// Define the callback function 'fetchImage' that will handle the logic for fetching and returning images
function fetchImage($data) {
    // Retrieve and sanitize the URL parameter from the incoming request data
    $url = esc_url_raw($data->get_param('url'));

    // Validate the provided URL
    if (!filter_var($url, FILTER_VALIDATE_URL)) {
        // If the URL is invalid, return a WP_Error indicating an invalid URL with a 400 Bad Request status
        return new WP_Error('invalid_url', 'Invalid URL provided.', array('status' => 400));
    }

    // Get image data (dimensions, MIME type, etc.) for the specified URL
    /**
     * Do not use getimagesize() to check that a given file is a valid image. Use a purpose-built solution such as the Fileinfo extension instead.
     * @link https://www.php.net/manual/en/function.getimagesize.php
     */
    $info = getimagesize($url);

    // Check if image data is available
    if (!$info) {
        // If image data is not available, return a WP_Error indicating an invalid image URL
        // or an inability to fetch image data with a 400 Bad Request status
        return new WP_Error('invalid_image', 'Invalid image URL or unable to fetch image data.', array('status' => 400));
    }

    // Set appropriate headers in the response to indicate the MIME type of the image
    header("Content-type: " . $info['mime']);

    // Output the binary image data from the specified URL
    readfile($url);

    // Terminate the script to prevent additional output
    die();
}

This is the explanation of the code he used to solve this problem.