Question

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

这是Postman收到的预期回复

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

这是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中的行为功能

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

   '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'],

Answer 1

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

Yii有built-in action defined under the ActiveController class来回复此类请求。但在您的情况下，您正在直接扩展其父控制器，因此您需要在控制器（或其中的父级）内部手动定义类似的操作，以响应预检请求：

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

也;因为你没有使用built-in routing mechanism for REST;在您的情况下，您还需要手动为{strong>选项操作定义rules：（您评论中代码的编辑版本）

'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',
    ],
];

Answer 2

您应该发送没有JSON.stringify的正文：

let body = {
  "name": name,
  "recipient": recipient
};

祝你好运

Post Post在Postman中工作，但在Angular 2 app中返回Preflight错误

2 个答案: