跨越原始请求被封锁:将Angular2邮政请求中的标头发送给Laravel的问题

Question

我正在使用angular2 laravel，我正在尝试用 headers 发布请求，但它给出了 cross-origin请求：错误。如果有人知道如何解决它。

我做了一些可能的解决方案，例如在Laravel的HTACCESS文件中启用访问控制 - 允许 - 孔"*"，并创建了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);
            }
        });
}

}

Answer 1

这是服务器端问题。

创建一个中间件：

namespace AppHttpMiddleware;
use Closure;
class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $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 () {

//您的路线代码 }）;

Answer 2

我正在使用laravel和angular 2。

在Laravel上，我安装了模块barryvdh/laravel-cors，当我发出帖子时，标题包括访问控制 - 允许 - 柔软 - 孔"*"。

但是，Angular2在发布之前使用选项进行了前拨打电话，而Laravel则在选项是选项时不会发送访问控制 - 允许孔"*"。

所以，我将其添加到.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"