Having trouble with CORS in your Angular application?

Question

Having trouble with CORS in your Angular application?

I am attempting to retrieve data from a site with the URL:

Using the $http service

After extensive research, I have come up with this CoffeeScript code snippet:

angular.module('blackmoonApp')
  .controller 'PricingCtrl', ($scope, $http) ->
    $http.defaults.useXDomain = true
    $http.get("https://bitcoinindex.es/api/v0.1/coinbase/usd/btc/last",
      headers:
        "Access-Control-Allow-Origin": "*"
    ).success (JSON) ->
      console.log JSON

The outcome is as follows:

"XMLHttpRequest cannot load https://www.bitstamp.net/api/ticker/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access."

I am uncertain if the website is intentionally blocking me (which seems unlikely given that it's an API), or if there are limitations with AngularJS when dealing with CORS.

javascript ajax angularjs

Answer 1

Answer №1

Access-Control-Allow-Origin is a header that controls access permissions in responses.

The following code snippet:

  headers:
    "Access-Control-Allow-Origin": "*"

… actually sets a header for requests.

Remember to configure it on

https://www.bitstamp.net/api/ticker/

, rather than within your JavaScript code.

Allowing unrestricted JavaScript access to any server would pose a significant security risk.

I am uncertain if the website is blocking my access (although it's an API).

By default, all connections are blocked. You must explicitly authorize external JavaScript origins to gain access. Otherwise, anyone with a bitstamp account could be vulnerable to having their bitcoins stolen by simply visiting a website utilizing the API through their browser session and cookies.

Answer 2

Access-Control-Allow-Origin is a header that controls access permissions in responses.

The following code snippet:

  headers:
    "Access-Control-Allow-Origin": "*"

… actually sets a header for requests.

Remember to configure it on

https://www.bitstamp.net/api/ticker/

, rather than within your JavaScript code.

Allowing unrestricted JavaScript access to any server would pose a significant security risk.

I am uncertain if the website is blocking my access (although it's an API).

By default, all connections are blocked. You must explicitly authorize external JavaScript origins to gain access. Otherwise, anyone with a bitstamp account could be vulnerable to having their bitcoins stolen by simply visiting a website utilizing the API through their browser session and cookies.

Answer 3

Answer №2

Your code snippet shows an attempt to include the header Access-Control-Allow-Origin in a GET request using Angular's $http.

It's important to note that CORS (Cross-Origin Resource Sharing) requires the Access-Control-Allow-Origin header to be present in the response sent by the server, not in the initial request. Additionally, this header must match the exact domain of the page making the request.

Based on my tests, I found that:

https://bitcoinindex.es/api/v0.1/coinbase/usd/btc/last

only allows CORS requests from its own domain, as indicated by the

Access-Control-Allow-Origin:https://bitcoinindex.es

response header.

```
https://www.bitstamp.net/api/ticker/
```
did not have the Access-Control-Allow-Origin header at all.

Answer 4

Your code snippet shows an attempt to include the header Access-Control-Allow-Origin in a GET request using Angular's $http.

It's important to note that CORS (Cross-Origin Resource Sharing) requires the Access-Control-Allow-Origin header to be present in the response sent by the server, not in the initial request. Additionally, this header must match the exact domain of the page making the request.

Based on my tests, I found that:

https://bitcoinindex.es/api/v0.1/coinbase/usd/btc/last

only allows CORS requests from its own domain, as indicated by the

Access-Control-Allow-Origin:https://bitcoinindex.es

response header.

```
https://www.bitstamp.net/api/ticker/
```
did not have the Access-Control-Allow-Origin header at all.

Having trouble with CORS in your Angular application?

Answer №1

Answer №2

Similar questions

Iterate over various selection lists and tally the frequency of each option being chosen

Tips for placing the header text at the center of a TemplateField in your design

What is the best way to ensure that the input submit element is only visible after the input checkbox element has been checked?

Jade Compilation with Gulp

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

"Improve your Angular ngrx workflow by utilizing the sandbox pattern to steer clear of

Downloading a PDF file through the use of Ajax and TCPDF can be a straightforward process

Error Encountered when Attempting to Retry AI SDK on Vercel's

What is the best way to patiently wait for lines to be printed out one by one

"Utilizing jQuery to integrate an Ajax-powered Gauge using Google Visualization API

Positioning an HTML table with the use of a for loop in JavaScript

Implementing RequireJS Singleton pattern with Web Workers

Real-time Broadcasts Straight to Your Web Browser

Organizing content by title or link using jQuery

Obtain JSON data through an HTTP POST call

When working with Next.js, I encountered a scenario where the useEffect() function was being triggered twice. I attempted to solve this issue by providing an empty array as the second argument, but to no

Ajax is able to fetch a JSON string, however it struggles to iterate through the successful data as an

Sharing a website link within Jquery and Ajax as a variable

Tips for transferring a control's value between pages using AJAX in ASP.NET

Uncover the underlying reasoning within the Vuex state