http - 使用CORS从Dart应用程序发布到laravel 4 API时出错

Question

我有一个使用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. 

非常感谢。

Answer 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设置为“*”-仅供引用，以防万一。