Question

我遇到了Laravel 5.4和我的React应用程序的问题，该应用程序使用Axios来处理请求。

这是我得到的错误。

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

这是预检后失败的请求：

这是我的Axios请求配置：

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

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

请求正在将API端点作为GET请求。我使用Laravel和laravel-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设置网址时，它说我正在使用HTTP协议请求端点，这似乎很奇怪。

我已经坚持了一段时间，可以对这个问题有所了解。似乎很多人都有类似的＃34; OPTIONS预检的问题。我已经完成了一些事情，比如创建一个只返回200 HTTP状态代码的中间件，如果请求的方法是OPTIONS。但那也没有用。将请求更改为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网址重定向到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状态代码和Location标题http://api.vendorgraphs.com/…

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

所以这不是一个真正的CORS问题 - 相反，它纯粹是一个混合内容问题。

Axios CORS / Preflight无法使用Laravel 5.4 API调用

1 个答案: