Why does the API work for some sites but not others and how can I make it work on mine

Ionic Framework ionic-v3
1

I’m having a torturous time trying to just get an Ionic API call to work with another local project.

I’ve read about setting the proxy in the config and read pages and pages of examples that are meant to work.
None of these have helped me do what should be a simple task.

I’m sure that someone will respond “that’s a CORS issue, it’s been talked about endlessly here” and my response to that is “I still can’t figure out how to make it work, and yes, I’ve searched everywhere”.

One of the things I can’t understand is why I can get the following code to work:

   this.http.get('https://www.reddit.com/r/gifs/new/.json?limit=10').map(res => res.json()).subscribe(data => {
     this.posts = data.data.children;
     console.log(this.posts);
 });

but if I use http://checkip.dyndns.org it won’t work.

I just want to talk to my localhost API running from the Visual Studio IDE.

but I get the dreaded
"XMLHttpRequest cannot load http://localhost:29511/api/sd/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access."

the code is

" let simplerequest = ‘http://localhost:29511/api/sd/’;
this.http.get(simplerequest).map(res => res.json()).subscribe(data => {
this.posts = data.data.children;
console.log(this.posts);
});"

and the ionic.config.json file is

{
“name”: “ContactManager”,
“app_id”: “”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
},
“proxies”: [{
“path”: “/api”,
“proxyUrl”: “http://localhost:29511/api”
}]
}

I must be missing something basic.

What would be ideal would be a github project with just a simple API working. Then I could rebuild my whole project around something that works. I love pages and pages of “this is how I did it” that I can’t duplicate, but what’s better is a simple download and “yay it works” and get on with life.

I can step into the API code in VS for the requests, but the error obviously happens during the response.

Playing with stubborn API’s is never fun.

2

Fix your Access-Control-Allow-Origin header to return this origin. Problem solved.

3

Thanks Sujan, I already tried the following, but it’s still the same:

var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
  headers.append('Access-Control-Allow-Origin','http://localhost:29511/api/sd/');
let options = new RequestOptions({ headers: headers });

let postParams = {
   title: 'foo',
   body: 'bar',
   userId: 1
}

this.http.post("http://d2.local/api/sd", postParams , options) //options
  .subscribe(data => {
    console.log(data['_body']);
    alert('');
   }, error => {
    console.log(error);// Error getting the data
  });

I also tried

headers.append(‘Access-Control-Allow-Origin’,‘http://localhost:8100’);

but I still get the same message

4

This is a server side header to be implemented.

5

Hi, after a week of deciding it’s too difficult, in Visual Studio I tried using NuGet to install CORS and in my API controller I added:

[EnableCors(origins: “http://localhost:8100”, headers: “", methods: "”, SupportsCredentials = true)]
public string Post(dynamic jsonData)
{
string userlogin = JsonConvert.SerializeObject(jsonData);
LoginViewModel userlogin1 = JsonConvert.DeserializeObject(userlogin);
return getLogin(userlogin1);
}

I also tried the same using “Get”.

but nothing has changed.

I’d really like to get this working, but with no working examples to refer to I feel I’m stuck in “get that syntax perfect” land, and that just does my head in. Any help or working examples would be great.

6

As @Sujan12 said, you need to fix it at server end. Did you do that using NuGet?

7

Yes, I did. I suppose I’ll keep at it and let you know when it works.