AngularJS SlimPHP CRUD - $http.delete 不起作用 - XMLHttpRequest 无法加载

Question

使用 AngularJS 和 SlimPHP v3 创建 CRUD 时遇到问题。 $app->get 和 $app->post 一切正常，但 $app->delete.

出现错误

我在不同的域名上有前端和后端，因为我必须设置 htaccess 将所有内容重定向到 index.php 以便 Slim 工作，所以没有成功将前端和后端放在同一个域上。这是我的 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();
?>

这是我的 Angular 代码：

function getOrders(){
    $http.get("url/test/").success(function(data){
        $scope.orders = data;
    });

};

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

我在 Angular 中正确地得到了 console.log 的订单 ID，但随后我得到：

删除url/test/22 XMLHttpRequest 无法加载 url/test/22。请求的资源上不存在 'Access-Control-Allow-Origin' header。因此不允许 Origin 'url' 访问。响应具有 HTTP 状态代码 400。

每次我写 url/ 我的意思是 http://mywebsite.com，但无法 post 有 2+ 个链接的问题。

感谢您的帮助。

Answer 1

CorsSlim 是您的朋友，它是在 Slim Framework 世界中启用 CORS 的更简单方法。使用composer安装并使用：

$app->delete('/test/{id}', function(Slim\Http\Request $request, Slim\Http\Response $response, array $args) {
    $response->write("delete is OK");
})->add(\CorsSlim\CorsSlim::routeMiddleware());

通过这种方式，您将确保请求包含必要的 headers。

旁注

在您的示例中，您仅在 /test 上使用 $app->options 而未在 /test/{id} 上使用。

AngularJS SlimPHP CRUD - $http.delete 不起作用 - XMLHttpRequest 无法加载

AngularJS SlimPHP CRUD - $http.delete doesn't work - XMLHttpRequest cannot load

javascript

php

.htaccess

slim

angularjs