CORS: PHP: Antwort auf Preflight-Anfrage fehlgeschlagen. Ich erlaube Herkunft

Question

Ich weiß also, dass es da draußen viele CORS-Beiträge gibt, und ich füge sie nur hinzu, aber ich kann keine Antworten finden, die mir helfen könnten. Also erstelle ich eine Angular 4-Anwendung, die auf meiner PHP-API basiert. Funktioniert lokal problemlos, wenn ich es mit der App unter app.example.com und der API unter api.example.com Übergeben Sie mein Login, da ich die folgende Fehlermeldung erhalte:

XMLHttpRequest kann http://api.example.com/Account/Login nicht laden. Antwort auf Preflight-Anfrage fehlgeschlagene Zugriffskontrollprüfung: Nein Der Header „Access-Control-Allow-Origin“ ist in der Anfrage vorhanden Ressource. Daher ist die Quelle „http://app.example.com“ nicht zulässig Zugang.

我的 php 代码如下所示：

$http_origin = $_SERVER['HTTP_ORIGIN'];

$allowed_domains = array(
    'http://example.com',
    'https://example.com',
    'http://app.example.com',
    'https://app.example.com',
    'http://www.example.com',
    'https://www.example.com'
);

if (in_array(strtolower($http_origin), $allowed_domains))
{  
    // header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Origin: $http_origin");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
}

// Access-Control-Header werden während OPTIONS-Anfragen empfangen
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Authorization, Content-Type,Accept, Origin");
    Ausgang(0);
}

我的 Angular 帖子如下所示：

public login(login: Login): Observable<LoginResponse> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Authorization', 'Basic' + btoa(login.Username + ':' + login.Password));
    return this.http.post(this.apiBaseUrl + '/Account/Login', "grant_type=client_credentials", { headers: headers })
        .map(response => {
            // Code
        });
}

如果我通过邮递员运行请求（这不会影响 CORS），我会得到：

{ "error": "invalid_client", "error_description": "Client-Anmeldeinformationen wurden in den Headern oder im Text nicht gefunden" }

我尝试将 origin 设置为 '*' 只是为了测试并查看这是否是问题的核心,但它仍然以同样的方式失败.

编辑 只是根据以下信息进行更新.更改标头中的大小写没有任何效果,并且从 wenn有任何效果.

将其放入每个 if 语句中.

编辑镜头 2 我确实需要一些帮助, 如果有人有任何想法, 我将非常感激.

Aufnahme 3 bearbeiten Wenn ich alle Header-Sachen in .htaccess statt in PHP einstelle, kann ich passieren. Jetzt bleibt mir jedoch der oben aufgeführte Fehler stecken, der der Fehler ist, den ich immer bekomme, wenn ich Postman verwende, aber jetzt, wenn ich die eigentliche Website verwende.

{"error": "invalid_client", "error_description": "Client-Anmeldeinformationen nicht im Header oder Text gefunden"}

Meine Antwortheader sehen so aus

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers: Autorisierung, Inhaltstyp, Akzeptieren, Herkunft
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:*

Sobald es funktioniert, ändere ich es von * in nur meine Domain. Aber jetzt belasse ich es als *.

Mein Header auf Anfrage.

Answer 1

在我的类似案例中，Angular 前端和 Php 后端帮助了下面的代码。首先我发送一个标头：

header("Access-Control-Allow-Origin: http://localhost:4200");   
header("Content-Type: application/json; charset=UTF-8");    
header("Access-Control-Allow-Methods: POST, DELETE, OPTIONS");    
header("Access-Control-Max-Age: 3600");    
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

在他们之后，我可以忽略选项请求：

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {    
   return 0;    
}

这种方法帮助我处理 Angular 中的“post”和“delete”嵌入请求方法。

Answer 2

好吧，我最近遇到了类似的问题，我只在后端解决了所有问题，没有 .htaccess 的东西。

当浏览器发送跨服务器请求时，它首先发送一个 OPTIONS 请求以确保其有效并且可以发送“真实”请求。 当它从 OPTIONS 获得正确且有效的响应后，才会发送“真正的”请求。

现在，对于后端的两个请求，您需要确保返回正确的标头：content-type、allow-origin、allow-headers 等...

确保在后端的 OPTIONS 请求中，应用程序返回标头并返回响应，而不是继续应用程序的完整流程。

在“真实”请求中，您应该返回正确的标头和常规响应正文。

示例：

//The Response object
    $res = $app->response;

    $res->headers->set('Content-Type', 'application/json');
    $res->headers->set('Access-Control-Allow-Origin', 'http://example.com');
    $res->headers->set('Access-Control-Allow-Credentials', 'true');
    $res->headers->set('Access-Control-Max-Age', '60');
    $res->headers->set('Access-Control-Allow-Headers', 'AccountKey,x-requested-with, Content-Type, origin, authorization, accept, client-security-token, host, date, cookie, cookie2');
    $res->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

    if ( ! $req->isOptions()) {
        // this continues the normal flow of the app, and will return the proper body
        $this->next->call();
    } else {
        //stops the app, and sends the response
        return $res;
    }

要记住的事情：

• 如果您使用：“Access-Control-Allow-Credentials”= true 确保“Access-Control-Allow-Origin”不是“*”，它必须设置正确的域！ （这里流了很多血：/）

• 定义您将在“Access-Control-Allow-Headers”中获得的允许标头 如果您不定义它们，请求将失败

• 如果您使用“Authorization: Bearer”，那么“Access-Control-Allow-Headers”也应包含“Authorization”，否则请求将失败