laravel - API 服务器总是响应 "No ' Access-Control-Allow-Origin'"

Question

我用 laravel 写后端。并尝试从 IONIC 调用 api 使用 @angular/http.

在后端服务器中，我已经在中间件和响应中添加了 Access-Control-Allow-Origin。

中间件。

return $next($request)
      ->header('Access-Control-Allow-Origin', '*')
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
      ->header('Access-Control-Allow-Credentials', true)
      ->header('Access-Control-Allow-Headers', 'Content-Type')
      ->header('Vary', 'Origin');

响应。

return response($data, 200)
      ->withHeaders([
        'Content-Type' => 'application/json',
        'Access-Control-Allow-Origin' => '*',
        'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE',
        'Access-Control-Allow-Credentials' => true,
        'Access-Control-Allow-Headers' => 'Content-Type',
        'Vary' => 'Origin',
      ]);

ionic

  url: any = 'http://myurl.local/api/';

  headers = new Headers(
  {
    'Accept' : 'application/json',
    'Content-Type' : 'application/json',
    'Access-Control-Request-Methods' : 'POST'
  });
  options = new RequestOptions({ headers: this.headers });

login(username, password) {
    let data = JSON.stringify({
      username : username,
      password : password
    });
    let fullUrl = this.url+'login';

    return new Promise((resolve, reject) => {
      this.http.post(fullUrl, data, this.options)
      .toPromise()
      .then((response) =>
      {
        console.log('API Response : ', response);
        resolve(response.json());
      })
      .catch((error) =>
      {
        console.error('API Error : ', error.toString());
        reject(error.json());
      });
    });
  }

当我使用 'Content-Type' : 'application/json' 调用 api 时，它总是响应错误。

XMLHttpRequest cannot load http://myurl.local/api/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

但如果我将 'Content-Type' 更改为 'application/x-www-form-urlencoded'。我没有收到任何错误。

但是当我尝试查看输入 $request->all() 时。我得到的数据是 '{"username":"XXXXXXXXXX","password":"XXXXXXXXXX"}' => NULL.

有 postman 就好了。我确实尝试了很多方法来解决这个问题，但我不能。

怎么了？

Answer 1

是啊!!!最后，我可以解决这个问题。该死的。

在中间件中。

public function handle($request, Closure $next)
  {
    if ($request->getMethod() == "OPTIONS") {
      return response(['OK'], 200)
        ->withHeaders([
          'Access-Control-Allow-Origin' => '*',
          'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE',
          'Access-Control-Allow-Credentials' => true,
          'Access-Control-Allow-Headers' => 'Authorization, Content-Type',
        ]);
    }

    return $next($request)
    ->header('Access-Control-Allow-Origin', '*')
    ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
    ->header('Access-Control-Allow-Credentials', true)
    ->header('Access-Control-Allow-Headers', 'Authorization, Content-Type');

  }

在 IONIC 中将标题更改为。

headers = new Headers(
{
  'Content-Type' : 'application/json'
});

在你添加 options 路由之前它不会起作用。 (就我而言，因为我不使用 Route::resource )

Route::group(['middleware' => 'AddHeader'], function()
{
  Route::post('/login', 'LoginController@index');
  Route::options('/login', 'LoginController@index');
});

PS。我在 function index() 中有一些逻辑，我尝试使用 __construct()。但它不起作用。