4

I seriously don't understand CORS .. fml I tried to access the web API I found online. but angular keeps giving me CORS error.. I don't know how to solve it anymore...

Comments
  • 0
    Not the correct guy to answer this, but i'll try.. CORS is an error when your website/ webapp is trying to fetch content from another server to display to the user. This is usually a big NO-NO in general, as allowing this would create potential threats. Imagine you host a server posing as a netbanking website and show some bank's login on your site in a frame, then intercept user credentials and hijack the customer's account?

    Are you serving content from a different server?
  • 0
    @manrock007 this API is just to display some pictures. how is that dangerous???
  • 0
    @cheezyhao95 The CORS strategy is a general implementation, and does not allow/ disallow things based on what API you're using. In case you still want to go ahead and disable it you can.. Atleast for development and debugging.. Read about Access-Control-Allow-Origin
  • 0
    @manrock007 just curious. I have this local server that is trying to access this web API to display image. why will it have CORS error?? in PHP I used curl with the same web api and it's fine. no error at all.
  • 0
    @cheezyhao95 It's happening because you're mixing content from your server and some other server before serving it to the user without telling the browser that you're doing so. CORS is just a mechanism that allows only controlled communication with other APIs. Thereby protecting your users and your business by preventing any funky business
  • 0
    @manrock007 but I need to fetch the image first then display to the user. Is there anyway I can circumvent this ???
  • 0
    @cheezyhao95 Use this plugin. It ignores CORS headers. For development this should be fine

    https://chrome.google.com/webstore/...
  • 1
    @cheezyhao95 As for enabling it generally, use this SO post as a reference

    http://stackoverflow.com/questions/...
  • 0
    @manrock007 I just tried angularjs2 with other web api and it works fine. The current web api requires me to add a few header. Could the header be causing the CORS ?
  • 0
    @cheezyhao95 The header IS where you specify the allowed CORS domains.
  • 1
    CORS is a restriction for scripting within browsers. It's a way of controlling what domains can access you script. By default, a "same domain only" origin policy is active. The API owner has to add the Access-Control-Allow-Origin header to their response and include either * (to allow everyone) or your domain explicitly. The only way you will get this to work is if the API you are calling is changed to send this header.

    jsonp also provides a way around CORS issues, but I don't know how that fits into the angular world.
  • 0
    @samk Aarrgghh... typo. "...access your script..."
  • 2
    The reason JavaScript xhr is more dangerous than PHP curl and requires CORS is that you're acting AS the user, not as yourself.

    If you're making a call in curl, you're doing it as the server using only the data the server has.

    If you make a cross-origin ajax call, you are using the session information stored in the user's computer that your app can't know anything about.

    Yes you can get around it, but you shouldn't. If you manage both sides, you can authorize traffic between them via special headers.
  • 0
    @dncrews is there anyway to avoid this ? Would mixing nodejs for backend and angularjs for front-end solve the problem ?? something like a mean-stack
  • 0
    @cheezyhao95 node-cors is the library you want. Basically you need an OPTIONS (similar to GET or POST) call that returns the allowed domains, methods, and headers
Your Job Suck?
Get a Better Job
Add Comment