允许使用 Laravel 和 Angular2 的 CORS答案

【问题标题】：Allow CORS With Laravel and Angular2允许使用 Laravel 和 Angular2 的 CORS
【发布时间】：2017-10-20 19:44:41
【问题描述】：

我正在创建一个 Laravel Web 应用程序，它将充当 Angular2 应用程序的 API，现在我将 Laravel 应用程序托管在 Windows 上的 WAMP 服务器上 laravel 在 localhost:8000 和 Angular 在 localhost:4200 我已经为 CORS 创建了这样的中间件：

class Cors {
public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, X-Token-Auth, Authorization');
    }
}

当调用我的 api url 时，我得到了这个：

XMLHttpRequest 无法加载 http://localhost:8000/api/myapi。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:4200' 因此不允许访问

我很确定这与中间件无关，因为当我 ng build Angular 应用程序时，API 可以工作，而在 localhost:4200 上服务时，它不能与 ng serve 一起工作

有什么想法吗？谢谢

【问题讨论】：

标签： php laravel angular wamp

【解决方案1】：

预检请求是HEAD 请求。您应该在Access-Control-Allow-Methods 中列出它。

您的handle 将是这样的：

public function handle($request, Closure $next)
{
    $response = $next($request);
    $response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE');
    $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
    $response->header('Access-Control-Allow-Origin', '*');
    return $response;
}

【讨论】：

谢谢你的回复，，，我真的不明白，我应该像GET, POST, PUT, DELETE, OPTIONS, HEAD一样吗？我试过了，还是不行

【解决方案2】：

已解决

原来是 chrome 本身的东西，该应用程序在边缘或任何浏览器上运行良好，为了使其在 chrome 上运行，安装这个插件。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en

【讨论】：

【解决方案3】：

您也可以考虑使用this 包。

【讨论】：