跨来源请求阻止：问题在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

回答

相关问题