CORS：PHP：对预检请求的响应未通过。我允许原产地

Question

所以我知道那里有很多 CORS post，我只是在添加它们，但我找不到任何可以帮助我解决问题的答案。所以我正在构建一个依赖于我的 php api 的 angular 4 应用程序。在本地工作没问题，当我使用 app.example.com 的应用程序和 api.example.com 的 api 将它扔到域上时，我无法通过我的登录，因为我得到以下错误：

XMLHttpRequest cannot load http://api.example.com/Account/Login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://app.example.com' is therefore not allowed access.

我的 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 headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Authorization, Content-Type,Accept, Origin");
    exit(0);
}

我的 Angular post 看起来像这样：

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
        });
}

如果我运行通过 postman 请求，这不会影响 CORS，我得到：

{ "error": "invalid_client", "error_description": "Client credentials were not found in the headers or body" }

我试过将 origin 设置为“*”只是为了测试看看这是否是问题的核心，但它仍然以同样的方式失败。

编辑只是从下面的信息更新。在 header 中更改大小写没有任何效果，将代码从它们的 if 语句中拉出也没有效果。

我通过告诉我的实时应用程序转到我的本地 api 来调试 php，并且 php 正在按预期工作。它正在设置 headers 并将其放入每个 if 语句中。

编辑拍摄 2 我真的可以在这方面得到一些帮助，如果有人有任何想法，我将不胜感激。

编辑拍摄 3 如果我在我的 .htaccess 中设置所有 header 的东西而不是我的 php，它会让我通过。但是，现在我陷入了上面列出的错误，我在使用 postman 时总是会遇到，但是现在是在使用实际站点时。

{"error":"invalid_client","error_description":"Client credentials were not found in the headers or body"}

我的回复header是这样

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:authorization, content-type, accept, origin
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:*

一旦我开始工作，我会将其从 * 更改为仅我的域。但现在我将其保留为 *.

我的header如要求。

Answer 1

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

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

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

确保在后端的 OPTIONS 请求中，应用程序 return 是 headers 和 return 的响应，而不是继续应用程序的完整流程。

在 "real" 请求中，您应该 return 正确的 headers 和您的常规响应 body。

示例：

    //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" 不是“*”，它必须设置正确的域！（这里洒了很多血：/）
定义允许的 headers 您将进入 "Access-Control-Allow-Headers" 如果您不定义它们，请求将失败
如果你使用"Authorization: Bearer"，那么"Access-Control-Allow-Headers"也应该包含"Authorization"，否则，请求将失败

Answer 2

我在下面添加了 php，它解决了我的问题。

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Content-Type, origin");

Answer 3

我遇到了类似的问题，

开发环境：NginX Proxy 后面的 Apache Web 服务器

我的应用程序位于我的 Apache 服务器的虚拟主机中，配置名称：appname.devdomain.com

在内部访问 Web 应用程序时，我没有通过代理：我正在使用 url：appname.devdomain.com

我这样没问题。

但是，当使用 public url 从外部访问它时：appname.prddomain.com 它会加载，甚至在登录后可以访问系统，然后加载模板和一些会话内容，然后，如果客户端进行异步调用，那么我会在 chrome 控制台中收到以下消息：

"Access to XMLHttpRequest at 'http://appname.devdomain.com/miAdminPanel.php' from origin 'http://appname.prddomain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."

为了测试这个我打开了两个标签

第一个选项卡使用 url 访问网络：appname.devdomain.com，生成 XMLHttpRequest -> OK

第二个选项卡使用 url 访问网络：appname.prddomain.com，生成 XMLHttpRequest -> 上面的 CORS 错误消息。

因此，更改 Nginx 代理配置后：

server {
    listen      80;
    server_name appname.prddomain.com;

    # SSL log files ###
    access_log      /path/to/acces-log.log;
    error_log       /path/to/error-log.log;

location / {
    proxy_pass  http://appname.devdomain.com;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

基本上这告诉代理将外部请求视为内部请求。

Answer 4

在我使用 Angular 前端和 Php 后端的类似案例中，下面的代码得到了帮助。首先我发送一个 headers:

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" 嵌入式请求方法

CORS：PHP：对预检请求的响应未通过。我允许原产地

CORS: PHP: Response to preflight request doesn't pass. Am allowing origin

php

cors

preflight

angular