Cross-query request blocked: problem sending headers in Angular2 mail request in laravel

Question

I am using angular2 + laravel and I am trying to send a request with headers, but it gives a request for a cross-request with a lock: error. If any body knows how to solve it.

I made some possible solution, for example, to include Access-Control-Allow-Origin "*" in the haraccess laravel file and created the CORS middleware, but these solutions do not work. Here is my angular code.

import { Injectable } from '@angular/core'; import { Http, Headers, Response, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map' import configApp = require('../_configs/app.settings'); //import '../assets/frontend/custom/js/jquery.toaster.config.js'; declare function maketoast(status: string, message: string) : void; @Injectable() export class ForgotpasswordService { constructor(private http: Http) { } forgotPassword(email: string, token: string) { alert(token) var headers = new Headers(); // headers.append('Content-Type', 'application11/json'); let headers = new Headers(); headers.append("Authorization", "Bearer " + token; let options = new RequestOptions({ headers: headers }); // console.log(configApp.apiUrl+/test); return this.http.post(configApp.apiUrl+"/password/email", JSON.stringify({ email: email, apiRequest:1}), options } ) .map((response: Response) => { // login successful if there a jwt token in the response let user = response.json(); console.log(user.status); if(user.status == false){ maketoast(user.toaster_status, user.message); event.stopImmediatePropagation; event.preventDefault(); event.stopPropagation(); } if (user.status == true) { maketoast(user.toaster_status, user.message); } }); } resetPassword(token: string, email: string, password: string, confirmPassword: string) { // console.log(configApp.apiUrl+/test); return this.http.post(configApp.apiUrl+"/password/reset", JSON.stringify({ token: token, email: email, password: confirmPassword, confirmPassword: password, apiRequest:1})) .map((response: Response) => { // login successful if there a jwt token in the response let user = response.json(); console.log(user.status); if(user.status == false){ maketoast(user.toaster_status, user.message); event.stopImmediatePropagation; event.preventDefault(); event.stopPropagation(); } if (user.status == true) { maketoast(user.toaster_status, user.message); } }); } 

}

Answer 1

This is a problem with the server.

Create middleware:

 namespace App\Http\Middleware; use Closure; class Cors { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle($request, Closure $next) { return $next($request) ->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); } } 

And add to your route:

 Route::group(['middleware' => ['cors']], function () { 

// YOUR route code});

Answer 2

I am using laravel and angular 2.

In Laravel, I installed the barryvdh / laravel-cors module, and when I made the POST call, the headers include Access-Control-Allow-Origin "*".

But angular2 makes a preflight call using OPTIONS before POST, and Laravel did not send Access-Control-Allow-Origin "*" when the action was OPTION.

therefore, I add this to the .htacess file

 RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]] Header always set Access-Control-Allow-Origin "*" Header always set Access-Control-Allow-Credentials "true" Header always set Access-Control-Max-Age "1000" Header always set Access-Control-Allow-Headers "X-Requested-With, Content- Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding" Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"