The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Question

The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Here is the complete code snippet:

this.http.post(link, data, { headers: headers })
   .map(res => res.json())
   .subscribe(data => {
       this.data.response = data._body;
    }, error => {
        console.log("Oops! An error occurred");
    });

Upon running the code, the following error message is displayed:

"XMLHttpRequest cannot load 
https://script.google.com/macros/s/AKfycbzdHHKBmLWJYZtFGlJGOrUwlPIWXor1geEOgcSgvhs/dev.     
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8100' is therefore not allowed access. 
The response had an HTTP status code of 401."

I have tried looking into CORS but it's still unclear to me...

Any assistance in resolving this issue would be highly appreciated.

javascript angularjs ionic2

Answer 1

Answer №1

My issue was similar, but after spending a few hours searching for a solution, it resolved itself.

ionic.config.json

{
  "name": "KickStarter",
  "app_id": "85ff0666",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/mobile",
      "proxyUrl": "http://xxxxx:port/mobile"
    }
  ]
}

To solve the problem, use

ionic g provider [name-of-provider] --ts

. This will generate a provider to handle requests like this:

export class AuthProvider {
    data: any = null;

    constructor(public http: Http) { }

    load() {
        if (this.data) {
            // already loaded data
            return Promise.resolve(this.data);
        }

        // don't have the data yet
        return new Promise(resolve => {
            // We're using Angular Http provider to request the data,
            // then on the response it'll map the JSON data to a parsed JS object.
            // Next we process the data and resolve the promise with new data.
            this.http.get('/mobile/api/authentication')
                .map(res => res.json())
                .subscribe(data => {
                    // we've got back the raw data, now generate the core schedule data
                    // and save the data for later reference
                    resolve(this.data);
                });
        });
    }
}

Just remember: /mobile/api/authentication maps to /mobile from the path specified in the ionic.config.json.

Answer 2

My issue was similar, but after spending a few hours searching for a solution, it resolved itself.

ionic.config.json

{
  "name": "KickStarter",
  "app_id": "85ff0666",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/mobile",
      "proxyUrl": "http://xxxxx:port/mobile"
    }
  ]
}

To solve the problem, use

ionic g provider [name-of-provider] --ts

. This will generate a provider to handle requests like this:

export class AuthProvider {
    data: any = null;

    constructor(public http: Http) { }

    load() {
        if (this.data) {
            // already loaded data
            return Promise.resolve(this.data);
        }

        // don't have the data yet
        return new Promise(resolve => {
            // We're using Angular Http provider to request the data,
            // then on the response it'll map the JSON data to a parsed JS object.
            // Next we process the data and resolve the promise with new data.
            this.http.get('/mobile/api/authentication')
                .map(res => res.json())
                .subscribe(data => {
                    // we've got back the raw data, now generate the core schedule data
                    // and save the data for later reference
                    resolve(this.data);
                });
        });
    }
}

Just remember: /mobile/api/authentication maps to /mobile from the path specified in the ionic.config.json.

Answer 3

Answer №2

Get the Allow-Control-Allow-Origin extension from the chrome web store. Activate CORS in the installed extension and run your code. This action will grant temporary CORS permission in your browser.

Answer 4

Get the Allow-Control-Allow-Origin extension from the chrome web store. Activate CORS in the installed extension and run your code. This action will grant temporary CORS permission in your browser.

The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Answer №1

Answer №2

Similar questions

Create JSX code for rendering components outside of the main component

Implementing HTML page authentication with Identity ADFS URL through JavaScript

What is the technique to make a *ngFor render items in a random order?

React - Parent Component not successfully passing Ajax data to Child Component

Utilizing the power of jQuery's `.clone` method to create a new window with fully

Perform an action when a key is held down and when it is released

Utilize the HTTP path to designate the currently active tab

Refreshing the angularJS Table after adding an item does not display properly in the view

A guide on manipulating an input field to trigger md-datepicker upon clicking

Tips for eliminating duplicate entries in ag grid using Angular

Spotlight barn doors in Three.js are an innovative feature that

What is preventing my application (docker) from connecting to the database?

Accessing the data from an HTML5 slider using JQuery

Disabling dates in Kendo Date Time Picker (Angular): An easy guide

Is there a way to fully break out of a .forEach loop that's nested within a function?

Issue with text input field causing the Enter key to not create a new line

Tips for retaining component data while navigating between components in vue js

How can I restrict the number of characters per line in a textarea using javascript or jQuery?

When a React component written in TypeScript attempts to access its state, the object becomes

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?