问题
I am using angular2+laravel and I am trying to post the request with headers but its giving Cross-Origin Request Blocked: error. If any body knows how to resolve it.
I did some possible solution like enable Access-Control-Allow-Origin "*" in htaccess file of laravel and created CORS Middleware but these solutions are not working. Here is my code of angular.
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's 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's 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);
}
});
}
}
回答1:
This is server side problem.
Create a 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 });
回答2:
I'm using laravel and angular 2.
On Laravel I installed the module barryvdh/laravel-cors and when I made a POST call the headers includes Access-Control-Allow-Origin "*".
But angular2 makes a preflight call using OPTIONS before POST, and Laravel wasn't sending Access-Control-Allow-Origin "*" when the action was OPTION.
so, I add this to .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"
来源：https://stackoverflow.com/questions/40934415/cross-origin-request-blocked-issue-on-sending-headers-in-angular2-post-request