Axios CORS /预检失败Laravel 5.4 API调用

问题描述：

我遇到Laravel 5.4和我的React应用程序使用Axios来处理请求的问题。Axios CORS /预检失败Laravel 5.4 API调用

这是我收到的错误。

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

这里是预检后失败的请求：

这里是我的爱可信的要求配置：

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请求。

这里是我的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, 
];

和我的config文件夹

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

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

我一直坚持这一段时间，现在可以使用一些关于这个问题的见解。似乎有很多人在OPTIONS预检中遇到过“类似”的问题。我做了一些事情，比如创建一个中间件，如果请求的方法是OPTIONS，它只返回一个200 HTTP状态码。但是那也行不通。将请求更改为Axios的OPTIONS并将Laravel的路由更改为类似于：

Route::options("/api/endpoint", [email protected]);

也没有工作。我只是不明白为什么它重定向到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>

使用htaccess配置编辑。这可能是一个弹性的豆茎问题？ –

答

你是看到了问题的原因，该服务器本身重定向URL 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端点发出跨源请求，而浏览器不会将其阻止为mi （如你所见）。

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

我没有看到我重定向到HTTP的任何地方。我使用弹性beanstalk来托管laravel应用程序。这可能是一个问题吗？ –

对，*你*不会重定向到任何地方 - 而是运行'api.vendorgraphs.com'的服务器重定向您的请求：它将您的'https：// api.vendorgraphs.com'请求（安全https）并将其重定向到'http：// api.vendorgraphs.com'（不安全的http）。这就是答案中的301状态码和位置标题。并且没有什么可以从你身边做到的。 – sideshowbarker

我无法写入重写规则以在.htaccess文件中强制使用https吗？ –

Axios CORS /预检失败Laravel 5.4 API调用

相关推荐