Post Request在Postman中工作，但在Angular 2应用中返回Preflight错误 [英] Post Request working in Postman but returns Preflight error in Angular 2 app

问题描述

这是来自浏览器控制台
的错误日志XMLHttpRequest无法加载 http://domain.com/ xx / xxxxxxxx 。飞行前响应的HTTP状态代码无效404

THis is the error log from browser console XMLHttpRequest cannot load http://domain.com/xx/xxxxxxxx. Response for preflight has invalid HTTP status code 404

这是邮递员收到的预期响应

This is the expected response as received in Postman

{
  "status": "success",
  "code": "E012",
  "message": "Contact sent"
}

这是从Angular 2发出的请求

this is the request made from Angular 2

makeRequest(name, recipient) {
let body = JSON.stringify({
  "name": name,
  "recipient": recipient
});

let authToken = localStorage.getItem('token');
console.log(authToken);
let headers = new Headers({'Authorization': authToken , 'Content-Type': 'application/json'}); 
let options = new RequestOptions({headers: headers});
return this.http.post(url, body, options )
  .map(res => res.json());

}

这是行为功能在Yii2中

Here is the behaviors function in Yii2

public function behaviors()
{
    $behaviors = parent::behaviors();

   // remove authentication filter
    $auth = $behaviors['authenticator'];
    unset($behaviors['authenticator']);

   // add CORS filter
    $behaviors['corsFilter'] = [
        'class' => Cors::className(),
        'cors' => [
            // restrict access to
            'Origin' => ['*'],
            'Access-Control-Request-Method' => ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
            // Allow only POST and PUT methods
            'Access-Control-Request-Headers' => ['*'],
            // Allow only headers 'X-Wsse'
            'Access-Control-Allow-Credentials' => true,
            // Allow OPTIONS caching
            'Access-Control-Max-Age' => 86400,
            // Allow the X-Pagination-Current-Page header to be exposed to the browser.
            'Access-Control-Expose-Headers' => [],
        ],
    ];

   // re-add authentication filter
    $behaviors['authenticator'] = $auth;
    // avoid authentication on CORS-pre-flight requests (HTTP OPTIONS method)
    $behaviors['authenticator']['except'] = ['options'];

   return $behaviors;
}

这是我的UrlManager

Here is my UrlManager

   'urlManager' => [
        'enablePrettyUrl' => true,
        'enableStrictParsing' => true,
        'showScriptName' => false,
        'rules' => [
            'POST <version:[\w-]+>/sms' => '<version>/sms/send',
            'POST <version:[\w-]+>/users/verify' => '<version>/user/verify', 
            'POST <version:[\w-]+>/bulk' => '<version>/routine/index',
            'POST <version:[\w-]+>/contact' => '<version>/contact/index'],

推荐答案

在某些情况下，浏览器将自动执行预检请求进行检查在实际发送卷轴之前允许的方法或动词的列表。您可以在浏览器的网络标签中看到这些内容。我猜在Postman中，您是直接发送 POST 请求，而预先发送的 OPTIONS 请求应该是失败的请求。

In certain cases a browser will automatically perform a preflight request to check the list of allowed methods or verbs before actually sending the reel one. You can see those within your browser's network tab. I guess in Postman you are directly sending the POST request while the pre-sent OPTIONS request should be the failing one.

Yii具有内置动作，它是 来响应此类请求。但是在您的情况下，您是直接扩展其父控制器，因此您需要在控制器（或它们的父控制器）中手动定义类似的操作，以响应预检请求：

Yii has a built-in action which is defined under the ActiveController class to respond to such requests. But in your case you are directly extending its parent controller instead so you'll need to manually define a similar action inside your controllers (or a parent one to them) responding to preflight requests:

public function actionOptions() 
{
    if (Yii::$app->getRequest()->getMethod() !== 'OPTIONS') {
        Yii::$app->getResponse()->setStatusCode(405);
    }

    $allowed_verbs = ['GET', 'POST', 'HEAD', 'OPTIONS'];
    Yii::$app->getResponse()->getHeaders()->set('Allow', implode(', ', $allowed_verbs));
}

因为您没有使用内置REST路由机制;在您的情况下，您还需要为该 Options 操作手动定义规则：（注释中代码的编辑版本）

Also; as you are not using the built-in routing mechanism for REST; in your case you'll also need to manually define rules to that Options action: (edited version of the code from your comments)

'urlManager' => [ 
    'enablePrettyUrl' => true,
    'enableStrictParsing' => true,
    'showScriptName' => false,
    'rules' => [ 
        'POST <version:[\w-]+>/users/verify' => '<version>/user/verify',
        'POST <version:[\w-]+>/airtime' => '<version>/airtime/airtime',
        'POST <version:[\w-]+>/bulk' => '<version>/routine/index',
        'POST <version:[\w-]+>/contact' => '<version>/contact/index',

        // OPTTIONS URI ENDPOINTS
        'OPTIONS <version:[\w-]+>/users/verify' => '<version>/user/options',
        'OPTIONS <version:[\w-]+>/airtime' => '<version>/airtime/options',
        'OPTIONS <version:[\w-]+>/bulk' => '<version>/routine/options',
        'OPTIONS <version:[\w-]+>/contact' => '<version>/contact/options',
    ],
];

这篇关于Post Request在Postman中工作，但在Angular 2应用中返回Preflight错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！