Question

我已经在angular 5中创建了应用程序。我正在调用带有标题的api，它将不会在浏览器中添加标题。它将在标题中显示OPTION而不是它。 403回应。我已在服务中启用CORS。当我打电话给没有标题的帖子时，它工作正常。请让我知道问题出在哪里。

 var headerOptions = new Headers();
        headerOptions.append('Content-Type', 'application/json');    
        headerOptions.append('Auth-Token', '12345');

        var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions });
        return this.http.post("mydomain.com/api/getdata", null, requestOptions)
          .map((data: Response) => { return data.json() })
          .toPromise().then(x => {



          }).catch(e => {
            console.log(e);
          });
      }

Answer 1

为请求方法OPTIONS返回带有200状态代码的响应

由浏览器完成，以检查服务器是否允许请求方法。收到200后，浏览器将发送您的实际请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

https://github.com/mgonto/restangular/issues/368

如果您使用的是PHP： 您可以在API /后端逻辑中拦截请求。我在项目中使用了一个函数（Zend Framework3-PHP）

    public function handlePreflightRequests(MvcEvent $event) {
    if ($event->getRequest()->getMethod() == 'OPTIONS') {
        $response = $event->getResponse();
        $response->setStatusCode(200);
        $response->getHeaders()->addHeaderLine('Content-Type', 'application/json');
        $view = new JsonModel(array('status' => 'success', 'message' => 'Checkpost passed'));
        $response->setContent($view->serialize());
        return $response;
    }
}

您可以在laravel中构建中间件，也可以仅在控制器中发送成功响应的控制器中检查请求方法，并在htaccess中添加以下内容：

<IfModule mod_headers.c>
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With, WU-Api-Key, WU-Api-Secret"

Answer 2

我建议您使用httpclient而不是http。在这里，我进行了服务，并在调用了带有标头的api时看到了我的代码，它工作正常。

login(logins: Login): Observable<LoginApiResponse> {
  const url = 'http://localhost:54708/Account/LoginAPI';
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': 'my-auth-token',
      'cookies': '.AspNetCore.Identity.Application=ttwetwtwe'
    })};
    return this._httpClient.post(url, logins, httpOptions)
      .pipe(map((myResponse => <LoginApiResponse> myResponse)));
  }

上面的代码是service.ts代码，我在如下的我的component.ts文件中使用了它。

this._Service.login(this.loginModel).subscribe(
      res => {
        if (res.status) {}
});

希望这行得通！！！！谢谢

Answer 3

不要两次定义请求方法，只需像

export class AppComponent {
  constructor(private http:Http) {

  }

  createAuthorizationHeader(headers:Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be79655-7ef7d7bf9d20')); 
  }

  executeHttp() {
    var headers = new Headers();
    this.createAuthorizationHeader(headers);
    headers.append('Content-Type', 'application/json');

    var content = JSON.stringify({
      name: 'my name'
    });

    return this.http.post(
      'https://angular2.apispark.net/v1/companies/', content, {
        headers: headers
      }).map(res => res.json()).subscribe(
        data => { console.log(data); },
        err => { console.log(err); }
      );
  }
}

希望有帮助！

Answer 4

我也有403和this.http.post(url, null)，并且在tomcat CorsFilter上启用了CORS。

使用干净的tomcat的相同请求this.http.post(url, null)正常工作。

将带有this.http.post(url, {})的请求添加到“ Content-Type：application / json”，然后使用CorsFilter发送给tomcat的请求对我有效。

requestOptions可以被某些HttpInterceptor覆盖。

Angular 5 Post无法正常工作

4 个答案: