使用 CORS 从 dart 应用程序向 laravel 4 api 发帖时出错

Posted 2023-03-04

【中文标题】使用 CORS 从 dart 应用程序向 laravel 4 api 发帖时出错

【英文标题】：Error doing a post from a dart app to a laravel 4 api using CORS

【发布时间】：2013-07-08 19:31:21

【问题描述】：

我有一个使用 Laravel 4 开发的 REST API。客户端是使用 Dart 语言编写的。

当我的 Dart 应用执行 GET 时，一切正常，但是当它执行发布时，我收到此错误：

XMLHttpRequest cannot load http://localhost:8000/api/v1/users. Origin http://127.0.0.1:3030 is not allowed by Access-Control-Allow-Origin.

我的 Dart 函数发出请求：

void submitForm(Event e) 
e.preventDefault(); // Don't do the default submit.

request = new HttpRequest();

request.onReadyStateChange.listen(onData); 

// Get Basic Auth credentials
var auth_string = 'admin:admin'; // Default admin login for creating new user accounts
var auth_base64 = window.btoa(auth_string);
var authorization = 'Basic '+auth_base64;

// POST the data to the server.
var url = 'http://localhost:8000/api/v1/users';
request.open('POST', url);
request.withCredentials = true;
request.setRequestHeader('Authorization',authorization);
request.setRequestHeader('Content-Type','application/json');
print(siftedregistrationAsJsonData());
request.send(siftedregistrationAsJsonData());

我的 Laravel 4 前后过滤器（定义在 filters.php 中）：

App::before(function($request)

if($_SERVER['REQUEST_METHOD'] === 'OPTIONS') 
    $statusCode = 204;

    $headers = [
        'Access-Control-Allow-Origin'      => 'http://localhost:3030',
        'Access-Control-Allow-Methods'     => 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers'     => 'Origin, Content-Type, Accept, Authorization, X-Requested-With',
        'Access-Control-Allow-Credentials' => 'true',
        'Access-Control-Max-Age'           => '86400'
    ];

    return Response::make(null, $statusCode, $headers);
);

App::after(function($request, $response)

    $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3030');
    $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    $response->headers->set('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization, X-Requested-With');
    $response->headers->set('Access-Control-Allow-Credentials', 'true');
    $response->headers->set('Access-Control-Max-Age','86400');
    return $response;
);

这是我使用 Chrome 开发工具获得的标题：

    Request URL:http://localhost:8000/api/v1/users
Request Method:OPTIONS
Status Code:204 No Content
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, authorization, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:8000
Origin:http://127.0.0.1:3030
     Referer:http://127.0.0.1:3030/Users/salarrahmanian/Dropbox/Projects/phpstorm/sifted/app/dart/web/out/sifted.html
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like    Gecko) Chrome/29.0.1530.0 (Dart) Safari/537.36
    Response Headersview source
    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Headers:Origin, Content-Type, Accept, Authorization, X-Requested-With
    Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
    Access-Control-Allow-Origin:http://localhost:3030
    Access-Control-Max-Age:86400
    Cache-Control:no-cache
    Connection:close
    Content-Type:text/html; charset=UTF-8
    Date:Wed, 10 Jul 2013 18:38:42 GMT
    Host:localhost:8000
    X-Powered-By:PHP/5.4.14
    Your help and input on this really appreciated. 

非常感谢。

【问题讨论】：

我认为没有设置标题，您是否使用 Firebug 或 chrome 调试工具检查了标题？？

我不确定，但它可以处理地址的差异吗？您通过 ip 在浏览器中打开，标题中是主机名？可能会有所不同...

添加标题我回到原来的帖子

【参考方案1】：

您允许来源 http://localhost:3030，但随后从 http://127.0.0.1:3030 请求。

变化：

$response->headers->set('Access-Control-Allow-Origin', 'http://localhost:3030');

到

$response->headers->set('Access-Control-Allow-Origin', 'http://127.0.0.1:3030');

注意：很遗憾，您不能在使用授权时将 Allow-Origin 设置为 '*' - 仅供参考，以防您也尝试过。

【讨论】：

尝试了你的建议，我仍然遇到同样的问题:-(