2

This is my full code... 

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

after running the code this error is present: 

"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 HTTP status code 401."

I've searched about CORS... but I can't get my head around it...

Any help will be appreciated.

Abhishek Patil
  • 1,373
  • 3
  • 30
  • 62
Manson Mamaril
  • 153
  • 2
  • 13
  • Duplicate: http://stackoverflow.com/questions/30132885/ionic-app-cannot-connect-cors-enabled-server-with-http – Quentin Jun 11 '16 at 12:39
  • 1
    Related: http://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-https-www-website-com/ – Quentin Jun 11 '16 at 12:40
  • The link that your are sending your POST request from does not have permission from the server to access whatever info it is requesting...it is security mechanism in place with client to server communication – repzero Jun 11 '16 at 14:33
  • How would I be able to have permission from the Google server? is there specific workflow between Ionic2 and Google Web Apps? – Manson Mamaril Jun 11 '16 at 14:56

2 Answers2

3

i have same issue but after some hours to search my problem gone.

ionic.config.json

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

you should use ionic g provider [name-of-provider] --ts it will generate provider to make a request 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 wi 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 -> /mobile from path in ionic.config.json.

vuhung3990
  • 6,353
  • 1
  • 45
  • 44
  • @vuhung3990 I'm struggling to make total sense of your solution because Googling on things like GlobalEnv, AuthBody, Headers, Languages doesn't give me a clue as to what packages you are using. Can you enlighten me? and perhaps include some imports too. Cheers. – JGFMK Mar 26 '17 at 19:42
  • @JGFMK hi, you don't need to know what GlobalEnv, AuthBody, Headers means, it's my custom component, i've just update my answer – vuhung3990 Mar 26 '17 at 20:57
  • From what I can make of CORS, you have to negotiate a pre-flight check, that I'd assume goes to another URL, and you'd need to supply some sort of user name and password. Are they normally query parameters of that authentication process? If so is that something you can put in the proxy url? I also would have thought that https://nodejs.org/api/http.html would have more details on this – JGFMK Mar 27 '17 at 14:42
-3

Download the Allow-Control-Allow-Origin application from google chrome. Enable the CORS in the application installed and execute your code. This will temporarily allow the CORS in your browser.

AishApp
  • 4,142
  • 2
  • 29
  • 33