AngularJS SlimPHP CRUD - $ http.delete not working - XMLHttpRequest cannot load

The problem with creating a CRUD using AngularJS and SlimPHP v3. Everything works for $ app-> get and $ app-> post but I get an error for $ app-> delete.

I put the front and back on different domains, because in order for Slim to work, it was necessary to set up htaccess so that all requests would be thrown at index.php, so I could not put the front and back on one server so that requests would be made.

Here is my backend index.php

<?php require __DIR__ . '/vendor/autoload.php'; use Psr\Http\Message\ServerRequestInterface; use Psr\Http\Message\ResponseInterface; $app = new \Slim\App(); header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: Content-Type'); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'); $app->options('/test', function() use($app) { $response = $app->response(); $app->response()->status(200); $response->header('Access-Control-Allow-Origin', '*'); $response->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With, X-authentication, X-client'); $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); }); $app->get('/test/', function(Slim\Http\Request $request, Slim\Http\Response $response, array $args) { $id = $args['id']; $sql = "SELECT * FROM wp_osoft_orders"; $dbhost = "host"; $dbuser = "user"; $dbpass = "pass"; $dbname = "db"; $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname); $headers = $response->getHeaders(); $response = $response->withHeader('Content-type', 'application/json'); $response = $response->withHeader('Access-Control-Allow-Origin', '*'); $headers = $response->getHeaders(); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->set_charset("utf8"); $result = $conn->query($sql); if ($result->num_rows > 0) { $resultsArray = array(); while($row = $result->fetch_assoc()) { array_push($resultsArray, $row); } $response->write(json_encode($resultsArray)); } else { $response->write("0 results"); } $conn->close(); }); $app->delete('/test/{id}', function(Slim\Http\Request $request, Slim\Http\Response $response, array $args) { $response = $response->withHeader('Access-Control-Allow-Origin', '*'); $response->write("delete is OK"); }); $app->run(); ?> 

And here is the front at Angular:

 function getOrders(){ $http.get("http://mydomain.com/test/").success(function(data){ $scope.orders = data; }); }; getOrders(); $scope.deleteOrder = function (orderId) { console.log("order to delete id: " + orderId); $http.delete("http://mydomain.com/test/"+orderId).success(function(response){ console.log('delete response: ' + response); }); getOrders(); }; 

Order Id in console.log In Angular, I get the right one, but then 2 errors:

DELETE http://mydomain.com/test/22 XMLHttpRequest cannot load http://mydomain.com/test/22 . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://mydomain.com ' is not allowed access. The response had HTTP status code 400.

Thanks for the help.