跨來源請求阻止：問題在Angular2後請求發送標頭laravel

我使用angular2 + laravel，我嘗試後與頭但它給阻止跨來源請求的請求：錯誤。如果任何機構知道如何解決它。跨來源請求阻止：問題在Angular2後請求發送標頭laravel

我做了一些可能的解決方案，例如在laravel的htaccess文件中啓用Access-Control-Allow-Origin「*」，並創建CORS中間件，但這些解決方案不起作用。這是我的角碼。

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); 

      } 
     }); 

}

}

來源

2016-12-02 Prabhdeep Singh

這不是一個角度的問題，而是一個與API。必須在服務器上設置CORS要求。 –

是的，我已經改變了.htaccess文件，並創建了一個相同的中間件，但根本不工作。 –

錯誤信息的確切含義是什麼？您爲編寫CORS頭文件而編寫的服務器端代碼在哪裏？提供[mcve]。 – Quentin

這是服務器端的問題。

創建一箇中間件：

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'); 
    } 
}

並添加到您的路線：

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

//你的路線碼 }）;

來源

2016-12-05 10:30:15

我使用laravel和角2.

在Laravel我安裝在模塊barryvdh/laravel-CORS並且當我由POST調用頭包括訪問控制允許來源「*」。

但angular2在POST之前使用OPTIONS進行預檢呼叫，並且當操作是OPTION時，Laravel未發送Access-Control-Allow-Origin「*」。

所以，我想補充這.htacess文件

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"

來源

2017-03-02 22:36:25

跨來源請求阻止：問題在Angular2後請求發送標頭laravel

回答

相關問題