Axios CORS/Preflight 因 Laravel 5.4 API 调用而失败

Question

我在使用 Laravel 5.4 和我的使用 Axios 处理请求的 React 应用程序时遇到问题。

这是我遇到的错误。

这是我失败的预检响应的请求标头。

这是预检后失败的请求：

这是我的axios请求配置：

let req = axios({
    method: "GET",
    url: https://api.vendorgraphs.com/{queryStringHere}
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + accessToken
    }
});

需要注意的一个有趣的事情是它使用 HTTPS 协议指定端点。我的应用程序上的类似请求正在正常工作，但这是唯一失败的请求。是不是因为使用了查询字符串？

请求作为 GET 请求到达 API 端点。我正在使用 Laravel 和 laravel-cors 包来处理我的 cors 请求。

这是我对 CORS 的配置：

这是在我的 Kernel.php 中

protected $middleware = [
    \Barryvdh\Cors\HandleCors::class,
    \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];

还有我在配置文件夹中的 cors.php

return [
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ["GET", "OPTIONS", "POST", "PUT", "PATCH", "DELETE"],
    'exposedHeaders' => [],
    'maxAge' => 0,
];

我可以明显看到网络选项卡中的预检失败。但我不明白的是为什么我会收到混合内容错误而不是 405 或其他一些 HTTP 状态代码。当我使用 HTTPS 显式设置 url 时，它说我正在使用 HTTP 协议请求端点，这似乎很奇怪。

我已经在这个问题上停留了一段时间，并且可以在这个问题上使用一些见解。 似乎很多人都对 OPTIONS 预检有“类似”的问题。如果请求的方法是 OPTIONS，我已经完成了创建一个只返回 200 HTTP 状态代码的中间件之类的事情。但这也没有用。将请求更改为 Axios 的 OPTIONS 并将 Laravel 上的路由更改为：

Route::options("/api/endpoint", controller@method);

也没有用。我只是不明白为什么它会重定向到 HTTP 协议并返回混合内容错误，而这似乎与 CORS 无关，但预检请求失败，这表明它是一个 CORS 问题。任何和所有的见解都是值得赞赏的。

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP:X-Forwarded-Proto} ^http$
    RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

Answer 1

您看到的问题的原因是，服务器本身将https URL 重定向到http：

$ curl -I 'https://api.vendorgraphs.com/api/dealershipvendorleads/?id=3,4&startDate=2017-4&endDate=2017-8'

HTTP/1.1 301 Moved Permanently
Content-Type: text/html; charset=iso-8859-1
Date: Wed, 20 Sep 2017 15:33:50 GMT
Location: http://api.vendorgraphs.com/api/dealershipvendorleads?id=3,4&startDate=2017-4&endDate=2017-8
Server: Apache
Connection: keep-alive

注意301 状态码，以及带有http://api.vendorgraphs.com/… 的Location 标头

这意味着，如果浏览器将其作为混合内容阻止（如您所见），您将无法从安全上下文（https 页面）向该 API 端点发出跨域请求。

所以这并不是真正的 CORS 问题，而是纯粹的混合内容问题。