API服务器始终响应“否'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',
      ]);

离子

  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无法加载http：//myurl.local/api/login。对预检请求的响应未通过访问控制检查：请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：8100 '。

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

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

有邮递员很好。我确实尝试了很多方法来解决此问题，但是我做不到。

怎么了

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()。但这行不通。