i face this issue which is says about blocking cors policy and "it doesnot have have HTTP ok status

See also questions close to this topic

• Dropbox android SDK auth access token malformed when use in Dropbox JS SDK

  Recently I have include Dropbox in my ionic 1 android application through Dropbox JavaScript SDK for user data backup. I have used inAppBrowser for authentication process. Everything is working perfectly and 100+ user already using this feature.

  After 100+ user I have applied for production request for my Dropbox application but they decline my application reason for OAuth app authorization flow inside a web view, instead of the system browser.

  For handling this situation I have made an ionic plugin for native authentication flow of Dropbox android SDK. I have develop & configure my plugin using Dropbox android SDK (https://www.dropbox.com/developers-v1/core/sdks/android) for getting access token. This part also working fine and I am getting access token successfully.

  But problem is, when I am sending my Access Token to JS SDK (https://github.com/dropbox/dropbox-sdk-js) it's returning 400 response The given OAuth 2 access token is malformed

  var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
  dbx.usersGetCurrentAccount()
  .then(function(response) {
      console.log(response);
  })
  .catch(function(error) {
      console.error(error);
  });
  

  In this situation what can I do? I can not figure out the solution.
• Storing data retrieved from API in another API - Ionic

  I am a beginner in Ionic. I have 2 APIs that I am using for my form. The first API is used to retrieve the name of the user. I am able to retrieve the name and display it in a label.

  Codes are as follows:

  my Provider (first API)

  getStaff(){
  return this.http.get<StaffRecords>(`${this.staffApiUrl}//some api,
    {headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))});}
  

  .ts file of my page (first API)

  ionViewDidLoad(){
  
  this.christmasProvider.getStaff().pipe(
    map((staffResult: StaffRecords) => staffResult && staffResult.records)
  ).subscribe(staffed => {
    if (staffed){
      this.storage.set('staff', staffed);
      this.staff = staffed;
      console.log(staffed);
    }
  });}
  

  The second API that i used in this form is for posting the user inputs. Currently, I am able to post the user input data into the API. However, I do not know how to take the data I retrieved from the first API and post it into my second API together with all the other fields. Basically, I need to use the data I retrieved from my first API (called 'display_name') and post it into the field in my second API (called 'dedicated_by_name').

  Codes are as follows: my Provider (2nd API)

  updateDedication(pledge_amount: number, phone_no: string, sing_to: string, dedicated_datetime: string, sing_to_department: string, location: string, song: string, other_song_request: string, special_request: string, message: string, remain_anon: number, status: string){
  return Observable.create(observer => 
    this.http.post(`${this.dataApiUrl}//some api`,
      { records: [{ 
        //"dedicated_by_name": dedicated_by_name,
        "pledge_amount": pledge_amount, 
        "phone_no": phone_no, 
        "sing_to": sing_to,
        "dedicated_datetime": dedicated_datetime, 
        "sing_to_department": sing_to_department, 
        "location": location, 
        "song": song, 
        "other_song_request": other_song_request, 
        "special_request": special_request, 
        "message": message, 
        "remain_anon": remain_anon, 
        "status": status}],
        resource_id: '//some api' },
      { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN')),
        responseType: 'text'})
    .subscribe(data => {
      console.log(data);
      observer.next(true);
      observer.complete();
    }, error => {
      console.log(error);
      observer.next(false);
      observer.complete();
    })
  );}
  

  .ts file of my page (2nd API)

  gotoConfirmpage(){
  this.submitAttempt = true;
  console.log("Success!");
  console.log(this.dediForm2.value);
  
  var obj = this.dediForm2.value;
  //console.log(dedicated_by_name);
  
  this.christmasProvider.updateDedication(obj.pledge_amount, obj.phone_no, obj.sing_to, obj.dedicated_date+"T"+obj.dedicated_time+":00", obj.sing_to_department, obj.location, obj.song, obj.other_song_request, obj.special_request, obj.message, obj.remain_anon, this.status)
  .subscribe((allowed => {
      //this.submit_error = false;
      //this.submit_success = true;
      console.log(allowed);
      //console.log(obj.dedicated_by_name);
    }
  ));
  
  //push to confirm page
  this.navCtrl.push(SongDediCfmPage);}
  

  HTML for the form (I included the part for the first api and the first field for the second api)

  HTML for the first API

  <ion-content padding>
  <p *ngIf="submitAttempt" style="color: #ea6153">Please fill out all fields!</p>
  <form [formGroup]="dediForm2">
    <h6 style="font-weight: bold" id="dedititle">My Dedication</h6>
    <ion-card color="secondary">
      <ion-list>
        <ion-item>
          <ion-icon item-left name="ios-person-outline" style="font-size:30px; width: 20px;"></ion-icon>
          <ion-label *ngFor="let s of staff" style="font-style: italic; font-size: 15px;">{{ s.display_name }}</ion-label>
        </ion-item>
  

  HTML for the 2nd API (first field only + submit button )

  <ion-item>
          <ion-icon item-left name="ios-cash-outline" style="font-size:30px; width: 20px;"></ion-icon>
          <ion-input type="number" formControlName="pledge_amount" name="pledge_amount" [class.invalid]="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)" placeholder="Pledge Amount" style="font-style:italic; font-size: 15px;"></ion-input>
        </ion-item>
  
        <ion-item *ngIf="!dediForm2.controls.pledge_amount.valid && (dediForm2.controls.pledge_amount.dirty || submitAttempt)">
          <p>Please enter an amount lesser than this.</p>
        </ion-item>
  
  <button ion-button icon-start class="pledgebtn" (click)="gotoConfirmpage()" [disabled]="!dediForm2.valid">
      <img src="assets/imgs/smiley_final.png" class="smileyimg">
      DEDICATE <br>SONG
    </button>
  </form>
  

  Please guide me on how I can store the value retrieved from the first API and post it back to the second API. Thanks guys.
• Creating ionic list with thumbnails, buttons and clickable rows

  I am trying to create an ion-list where each row has the following items from left to right

  A thumbnail with an image from a URL OR and an ionic with 'clipboard' A small text string A tappable button/icon with the iso-information-circle-outline image (will be used to show a popover A right-arrow at the far side showing that tapping this row will take them user to the next page

  Originally I had the ngFor loop producing buttons for each row, and that made the arrow at the end appear, but stopped any buttons inside each row for being tapped correctly.

  Other variants have meant the buttons are not aligned with text or if I use an ion-label around {{survey.label}} the button disappears altogether.

   <ion-item *ngFor="let survey of surveys" (click)="openSurvey(survey)">
          <ion-thumbnail item-start>
              <img *ngIf="survey.icon" width="35" src="{{survey.icon}}"/>
              <ion-icon *ngIf="!survey.icon" name="clipboard"></ion-icon>
          </ion-thumbnail>
          {{survey.label}}
          <button (click)="showSurveyInfo($event, survey);$event.stopPropagation();" ion-button icon-only clear >
              <ion-icon name="ios-information-circle-outline"></ion-icon>
          </button>
          <button ion-button item-end icon-only clear>
              <ion-icon name="ios-arrow-forward"></ion-icon>
          </button>
      </ion-item>
  

  

  This is how I'd like to lay it out, all there red parts are just annotations for this question. The Title and I have their vertical enters horizontally aligned. There is a subtitle in the lower half of the row and the lower text stops, preferably with an ellipsis (though probably out of scope for this question) so that the right arrow is always visible. Note too that the circle around the I is complete. In my current mark it is within a button and that clips the top and bottom off the icon.