Why don't cross-domain HTTP OPTIONS requests work?

Question

JavaScript

Hello! I'm trying to make cross-domain requests, and when I try to send a DELETE request, an OPTIONS request is sent, but for some reason I always get 403 in response to it. And in the console an error message:

XMLHttpRequest cannot load 5to5admin:8888/images/1 . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' localhost:8000 ' is therefore not allowed access.

GET requests pass with a bang. If you make POST requests through jQuery - they work, but through $resource - the same error as above.

Client side: angular. Server (OpenServer): apache + php.

The last four lines in htaccess I used to redirect all requests to index.php before the cross-domain ones were needed.

.htaccess

# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type,Accept-Language,Accept-Charset,X-Request-With,Content-Length,Accept,Origin"

RewriteEngine On

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
#RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]

RewriteBase /
RewriteCond  %{REQUEST_FILENAME} !-f
RewriteCond  %{REQUEST_FILENAME} !-d
RewriteRule  ^(.*)$ index.php?customUrl=$1 [QSA,L]

This is what the resource looks like in Angular:

'use strict';

(function () {

    function imageFun ($resource)
    {
        return $resource('http://5to5admin:8888/images/:id.json', { id: '@id' }, {
            'query': {
                url: 'http://5to5admin:8888/images/?from=:start&limit=:limit',
                method:'GET',
                params: {
                    start: '@start',
                    limit: '@limit'
                },
                isArray: true
            },
            'delete': {
                url: 'http://5to5admin:8888/images/:id',
                method:'DELETE',
                params: {
                    id: '@id'
                }
            }
        });
    }

    angular.module('ftfAdminPanel.images')
        .factory('Image', [ '$resource', imageFun ]);

})();

This is what an OPTIONS request looks like:

Thanks in advance.

Answer 1

A week has passed. I did not give up :)
After various experiments, it became clear to me that the problem was somewhere in the Apache configuration. Because OPTIONS requests don't reach my htaccess. But, since I have never worked with this config in my life, I did not know what to look for and what to fix.
But one day I came across a post on stackoverflow with the title - "How to configure Apache to block OPTIONS requests". Eureka! It was just what we needed! And I easily found the following lines in my OpenServera config:

<Directory "%ssitedir%/*">
    AllowOverride All
    Options -MultiViews +Indexes +FollowSymLinks +IncludesNoExec +Includes +ExecCGI
    <LimitExcept GET POST HEAD >
        Require all denied
    </LimitExcept>
</Directory>

And added an OPTIONS query:

<Directory "%ssitedir%/*">
    AllowOverride All
    Options -MultiViews +Indexes +FollowSymLinks +IncludesNoExec +Includes +ExecCGI
    <LimitExcept GET POST HEAD OPTIONS DELETE>
        Require all denied
    </LimitExcept>
</Directory>

Everything worked! Hooray, comrades!!