代码之家  ›  专栏  ›  技术社区  ›  x4k3p

Angular返回选项的结果,而不是调用的方法

  •  0
  • x4k3p  · 技术社区  · 7 年前

    我有一些角度4应用程序,并期待一个奇怪的错误。 有一个服务,myService。它有一个用于应用程序其他部分的请求方法。

    (局部视图)

    import { Injectable, Inject } from '@angular/core';
    import { Http, RequestOptions, Headers, Response } from '@angular/http';
    import { Observable } from 'rxjs';
    import { SweetAlertService } from 'ng2-sweetalert2';
    import { TranslateService } from '@ngx-translate/core';
    import { Toast, ToastsManager } from 'ng2-toastr/ng2-toastr';
    
    @Injectable()
    export class myService {
    
        constructor(
            @Inject(SweetAlertService) swal: SweetAlertService,
            private http: Http,
            public toaster: ToastsManager
        ) {
            this._swal = swal;
        }
    
        public absTop(el) {
            return el.offsetParent ? el.offsetTop + this.absTop(el.offsetParent) : el.offsetTop;
        }
    
        public post(path: string, requestData?: any, settings?: any) {
            !settings && (settings = {});
            settings.method = 'post';
            return this.request.call(this, path, requestData, settings);
        }
    
        public get(path: string, requestData?: any, settings?: any) {
            !settings && (settings = {});
            settings.method = 'get';
            return this.request.call(this, path, requestData, settings);
        }
    
        public request(path: string, requestData?: any, settings?: any): Observable<Response> {
            settings = settings || {};
            var supErr = settings.suppressError;
    
            let headers = new Headers();
            headers.append('Content-Type', 'application/json');
            let options = new RequestOptions({ headers: headers })
    
            let prefix: string = window['requestUrlPrefix'] || '';
    
            if (!window['countLoadings']) {
                window['countLoadings'] = 1;
            } else {
                ++window['countLoadings'];
            }
    
            if (document.body.className.indexOf("load-mask") < 0) {
                document.body.className += " load-mask";
            }
    
            var toid = setTimeout(function() {
                if (window['countLoadings'] > 0) {
                    if (document.body.className.indexOf("load-spinner") < 0) {
                        document.body.className += " load-spinner";
                    }
                }
            }, 400);
    
            let method = settings && settings.method ? settings.method : 'post';
            let obs = this.http[method](prefix + path, JSON.stringify(requestData), options).share();
    
            if (settings.timeout) {
                obs = obs.timeout(settings.timeout);
            }
    
            let onErr = (err) => {
                let resp = '';
    
                let status = err.status ? err.status : err.name;
    
                if (supErr === true || supErr == status || (Object.prototype.toString.call(supErr) === '[object Array]' && supErr.indexOf(status) >= 0)) {
                    // supress the error message
                } else {
                    this.swal({
                        text: 'The is an error!<br>' + resp,
                        type: 'error'
                    });
                }
                fin();
            };
    
            let fin = () => {
                setTimeout(() => {
                    if (--window['countLoadings'] === 0) {
                        document.body.className = document.body.className.replace(/\bload-mask\b/, '').replace(/\bload-spinner\b/, '');
                        clearTimeout(toid);
                    }
                }, 1);
            };
    
            obs.subscribe(
                fin,
                onErr
            );
    
            return obs;
        }
    

    后端部分绝对正确。返回所有必需的标头。CORS总是设置为原点(在开发模式下),因此没有任何问题。

    问题在于:

    ...cut...
    export class AppComponent implements OnInit {
    
    constructor(
        public settings: SettingsService,
        public myService: myService,
    ...cut...
            myService.post('/someEndpoint', null, {
                timeout: 10000,
                suppressError: [412, 403]
            }).subscribe((ret) => {
    
                console.log(ret);
    ...cut...
    

    console.log(ret) 始终显示浏览器执行的飞行前请求的结果(正文)。如果我禁用了CORS(Safari中的f.e.),它会正常工作,因为返回了正确的数据。但如果启用了CORS(就像在prod中一样),订阅部分中的数据就不正确了。

    其他信息(示例):

    • 该应用程序在以下位置可用 app.somedomain.com
    • api可在 api.somedomain.com

    这里有什么问题?(我不知道角度:D)

    更新

    我试着简单地添加一个方法来进行api调用。它看起来像:

    public test(): Observable<Response> {
    
            let headers = new Headers();
            headers.append('Content-Type', 'application/json');
            let options = new RequestOptions({ headers: headers })
    
            return this.http
                .post('http://api.somedomain.com/someEndpoint', '{}' ,options)
                .map(response => {
                    console.log(response)
                    return response
                })
                .catch(this.handleError);
    }
    

    我仍然从浏览器的选项调用中得到响应。。。

    我在某些组件中这样调用该方法:

    this.test = this.myService.test();
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   x4k3p    7 年前

    答案似乎很简单。。。

    options.withCredentials = true 缺少。。。(请求中)