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

我在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>

解决方法:

您看到的问题的原因是,服务器本身将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问题,而是纯粹的混合内容问题.

标签：laravel-5-4,axios,cors,mixed-content,php
来源： https://codeday.me/bug/20191025/1930472.html