XMLHttpRequest cannot load error on adding location with UserId

[rohitvinay]

I want to list the locations, according to UserId similar to bookings, I changed the addLocation to this

addLocation(form) {
    this.submitted = true;
    if (form && this.formData.name) {
      let location = {
        name: this.formData.name,
        description: this.formData.description,
        imageUrl: this.formData.imageUrl,
        userId: this.globals.getUserId(),
        userFirstName: this.globals.getUserFirstName(),
        userLastName: this.globals.getUserLastName()
      };
      this.globals.displayLoader("Adding...");
      this.authClient.getClient().locationsCreate(this.globals.getUserId(), location).subscribe(
        (data) => {
          this.globals.dismissLoader();
          this.globals.displayToast(`Location successfully added.`);
          this.navCtrl.pop();
        },
        (err) => {
          this.globals.dismissLoader();
          this.globals.displayAlert('Error encountered',
            `An error occurred when trying to add the location. Please check the console logs for more information.`);
          console.error(err);
        }
      );
    }
  }

and locationsCreate to this

public locationsCreate (userId: string, location: models.Location, extraHttpRequestParams?: any ) : Observable<models.Location> {
        const path = this.basePath + '/locations'
        .replace('{' + 'userId' + '}', String(userId));

        let queryParameters = new URLSearchParams();
        let headerParams = this.defaultHeaders;
        // verify required parameter 'userId' is not null or undefined
        if (userId === null || userId === undefined) {
            throw new Error('Required parameter userId was null or undefined when calling bookingsCreate.');
        }
        // verify required parameter 'location' is not null or undefined
        if (location === null || location === undefined) {
            throw new Error('Required parameter location was null or undefined when calling locationsCreate.');
        }
        let requestOptions: RequestOptionsArgs = {
            method: 'POST',
            headers: headerParams,
            search: queryParameters
        };
        requestOptions.body = JSON.stringify(location);

        return this.http.request(path, requestOptions)
            .map((response: Response) => {
                if (response.status === 204) {
                    return undefined;
                } else {
                    return response.json();
                }
            });
    }

I get the below error if i try to add new locations

XMLHttpRequest cannot load https://cg7fazfa5q.execute-api.us-east-1.amazonaws.com/development/locations. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8101' is therefore not allowed access. The response had HTTP status code 403.

[justonian]

Hi Rohit-

Whenever you see a generic 403 error come back from API Gateway mentioning No "Access-Control-Allow-Origin" header present this is due to the fact that API Gateway's built-in error handlers do not currently return the needed CORS headers to display the actual error message directly in a browser, at least when running via localhost emulation. If you run the app directly on your mobile device or without using "ionic serve," you will see the actual error going on, but generally for any 403, it's simply "user is unauthorized." That said, you can gain more insight into these actual issues by looking at the network traffic window in the Chrome developer tools and dig into the details of the failed 403 response request. It will likely show you the real error you're looking for there.

Let us know if you have any more trouble with the project's features. If you haven't pulled it in a while, you may want to pull it now as some major features were added this week.

Thanks,

Justin