首页 文章

对预检请求的响应未通过访问控制检查Laravel和Ajax调用

提问于
浏览 次
7

我在远程服务器中托管的Laravel 5.1中创建了一个REST api . 现在，我'试图从其他网站（我在本地）使用该API .

在Laravel中，我设置了发送CORS头所需的行 . 我还使用Postman测试了API，一切似乎都没问题！

In the Frontend

然后，在网站上我使用ajax发送了POST请求，代码如下：

var url="http://xxx.xxx.xxx.xxx/apiLocation";
var data=$("#my-form").serialize();
    $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: { 'token': 'someAPItoken that I need to send'},
                    success: function(data) {
                        console.log(data);
                    },
                    dataType: "json",
                });

买然后我在控制台中收到此错误：

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

In the Backend

在API中我设置了这个（使用Laravel Middleware来设置 Headers ）：

return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

所以，我很困惑究竟问题出在哪里 .

  • 在服务器上？但那么为什么Postman工作正常呢？

  • 是否在Ajax调用中？那么，我应该添加什么？

javascript jquery cors cross-domain laravel-5.1

1 回答

  • 4

    您的后端代码必须包含对 OPTIONS 请求的一些显式处理，这些请求仅使用已配置的标头发送 200 响应;例如：

    if ($request->getMethod() == "OPTIONS") {
    return Response::make('OK', 200, $headers);
}

    服务器端代码还必须发送一个 Access-Control-Allow-Headers 响应头，其中包含您的前端代码发送的 token 请求头的名称：

    -> header('Access-Control-Allow-Headers', 'token')

    但是为什么Postman工作正常呢？

    因为Postman不是一个Web应用程序，并且不受浏览器在Web应用程序上的相同来源策略限制的约束，以限制它们发出跨源请求 . Postman是一个浏览器插件，方便测试请求，就像使用 curl 或命令行中的任何内容一样 . 邮递员可以自由地提出跨领域请求 .

    相反，https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS解释了浏览器如何阻止Web应用程序发出跨源请求，以及如何通过配置后端来发送正确的CORS头来解除阻止浏览器执行此操作 .

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释了为什么浏览器正在发送您的后端需要处理的 OPTIONS 请求 .

    回复于

相关问题