2

在 Angular2 应用程序和 Java 后端 API 之间实现和处理 CORS 问题时，我已经走到了尽头。

我知道并知道什么是 CORS 请求，已经在 angular1 应用程序中实现，但我无法使其在 Angular2 (Ionic2) 应用程序中工作。

ionic 2 应用程序应该使用现有的 API Web 服务，该服务已经启用了用于发出 CORS 请求的一切，并且身份验证是使用 Http only cookie 完成的......已经在 Angular 1 中实现。

出于某种原因，当我们在请求中设置标头时，Angular2 将“ withCredentials ”标志设置为 false 或根本不发送，并且向 api 发出请求但不返回 cookie……我们无法进行身份验证API 调用。我已经尝试了很多很多东西来将 http 标头和“withCredentials”标志一起发送，但在 Angular2 中似乎没有任何效果，而在 Angular1 中则可以正常工作。我们发送的所有标头都是服务器允许的，它们在响应中的“Access-Control-Allow-Headers”中返回。

有趣的是，如果我尝试仅使用“withCredentials”标志发送请求，则请求发送正常，并且浏览器正确设置了 cookie。

我尝试过以下事情：

  1. 创建自定义 http 类，如下所述：http: //www.adonespitogo.com/articles/angular-2-extending-http-provider/

  2. 扩展类似 BrowserXhr 类并将“withCredentials”设置为 true，如下所述：Angular 2 - http get withCredentials

  3. 直接在 RequestOptions 中设置，如下所示： angular 2 http withCredentials

  4. 像这里一样扩展 BaseRequestOptions (RequestOptions)： Angular2 - 为每个请求设置标头

示例代码：

import { Injectable } from '@angular/core';
import { Headers, RequestOptions } from '@angular/http';

@Injectable()
export class DefaultRequestOptions extends RequestOptions {

    withCredentials:boolean = true;

    // headers:Headers = new Headers({
    //     'Accept': 'application/json, text/plain, */*',
    //     'Authorization': 'sometoken',
    // });

    constructor() {
        super();
        if(!this.headers){
            this.headers = new Headers();
        }

         this.headers = new Headers();
         this.headers.append('Accept','application/json');
         this.headers.append('CustomHeader',"someTokenGoesHere");

        this.withCredentials = true;
    }
}

稍后在模块中：

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    IonicModule.forRoot(MyApp,{tabsHideOnSubPages:true})
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    { provide: RequestOptions, useClass: DefaultRequestOptions } 
  ]
})

也试过这样：

let headers = new Headers();
headers.append("Accept",'application/json');
headers.append("CustomHeader",'someTokenGoesHere');

let options = new RequestOptions({ headers: headers, withCredentials: true});

this.http.get('apiurl',options).subscribe((res)=>{ console.log(res)})

如果有人成功结合了 http 标头和 withCredentials 标志，请分享您的经验。

更新： 我没有找到解决这个问题的方法，所以我们决定删除一些安全头并对请求进行 IP 地址过滤。通过这种方式，我们不需要发送任何额外的 http 标头并继续使用 httponly cookie。

4

1 回答 1

0

您可以在 http 请求的选项对象中添加标头

let headers: Headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded'
});
let options = {
  method: RequestMethod.Post,
  headers: headers,
  responseType: ResponseContentType.Blob,
  withCredentials: true
};

return this.http
  .post(API + `/user/${id}`, {}, options)
  .map((r: Response) => {

  });
于 2017-06-20T14:44:13.910 回答