Guidelines for accessing the Coinbase exchange API from a localhost

Question

Guidelines for accessing the Coinbase exchange API from a localhost

Following the instructions in the Coinbase Cloud documentation, I tried running this code on the client side using JavaScript:

  const options = {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    'cb-access-key': 'Apikey',
    'cb-access-passphrase': 'Mypassphrase',
    'cb-access-sign': cb_access_sign,
    'cb-access-timestamp': cb_access_timestamp
  }
};

fetch('https://api.exchange.coinbase.com/coinbase-accounts', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

I encountered the same issue when attempting to do it with axios.

An error was displayed in the console:

"Access to fetch at 'https://api.exchange.coinbase.com/coinbase-accounts' from origin 'http://localhost:3000' has been blocked by CORS policy:
Request header field cb-access-passphrase is not allowed by Access-Control-Allow-Headers in preflight response."

Could someone please advise on what I might be doing incorrectly?

javascript http cryptography fetch-api coinbase-api

Answer 1

Answer №1

In order to achieve this task, it is not possible in the browser alone; you have to execute it from the web server. One option is to showcase the data when the page initiates or opt for vue/react and customize your own communication with the webserver.

Additional note: attempting to perform this action directly in the browser may expose your keys...

Answer 2

In order to achieve this task, it is not possible in the browser alone; you have to execute it from the web server. One option is to showcase the data when the page initiates or opt for vue/react and customize your own communication with the webserver.

Additional note: attempting to perform this action directly in the browser may expose your keys...

Answer 3

Answer №2

Coinbase API has a misconfigured CORS setup, making it difficult to test in a dev environment, potentially requiring API calls from a server. One solution is to use a proxy like cors-anywhere, which changes the flow of API calls:

Client (localhost:3000) <-> Coinbase API (api.exchange.coinbase.com)

to

Client (localhost:3000) <-> Proxy Server (www.your-proxy-server.com) <-> Coinbase API (api.exchange.coinbase.com)

In this setup, Coinbase will only see requests coming from the proxy server and won't know where the data is being sent back from. Cors-anywhere will also include headers and data along with the request.

Avoid using public cors-anywhere servers for testing unless necessary; setting up your own is recommended.

Implementation with Firebase

I utilized cors-server to set up mine using Firebase functions. Your Firebase functions should resemble the following:

const {onRequest} = require("firebase-functions/v2/https");
const corsAnywhere = require('cors-anywhere');
const cors = require("cors")({origin:true})

const corsServer = corsAnywhere.createServer({
    originWhitelist: [
      'http://localhost:3000',
    ],
    requireHeader: ['origin', 'x-requested-with'],
    removeHeaders: ['cookie', 'cookie2'],
});

exports.proxy = onRequest((request, response) => {
  cors(request,response,() =>{
    corsServer.emit('request', request, response);
  })    
});

and an example of a request in your client code

return(
       axios({
                url: `https://proxy-your-function-id.a.run.app/https://api.exchange.coinbase.com/profiles`,
                headers: await getHeaders(options),
                method: 'GET',
                data: options.body
             }).then((response)=>{
                return(response)
             }).catch((err)=>{
                return(err.response)
      })
)

Note: Coinbase Pro and its API will be discontinued by the end of 2022. However, Coinbase exchange and its API will still be accessible at . Pro users will be transitioned to Advanced Trading on the main platform, using oAuth for API linkage or standard keys for personal projects.

Answer 4

Coinbase API has a misconfigured CORS setup, making it difficult to test in a dev environment, potentially requiring API calls from a server. One solution is to use a proxy like cors-anywhere, which changes the flow of API calls:

Client (localhost:3000) <-> Coinbase API (api.exchange.coinbase.com)

to

Client (localhost:3000) <-> Proxy Server (www.your-proxy-server.com) <-> Coinbase API (api.exchange.coinbase.com)

In this setup, Coinbase will only see requests coming from the proxy server and won't know where the data is being sent back from. Cors-anywhere will also include headers and data along with the request.

Avoid using public cors-anywhere servers for testing unless necessary; setting up your own is recommended.

Implementation with Firebase

I utilized cors-server to set up mine using Firebase functions. Your Firebase functions should resemble the following:

const {onRequest} = require("firebase-functions/v2/https");
const corsAnywhere = require('cors-anywhere');
const cors = require("cors")({origin:true})

const corsServer = corsAnywhere.createServer({
    originWhitelist: [
      'http://localhost:3000',
    ],
    requireHeader: ['origin', 'x-requested-with'],
    removeHeaders: ['cookie', 'cookie2'],
});

exports.proxy = onRequest((request, response) => {
  cors(request,response,() =>{
    corsServer.emit('request', request, response);
  })    
});

and an example of a request in your client code

return(
       axios({
                url: `https://proxy-your-function-id.a.run.app/https://api.exchange.coinbase.com/profiles`,
                headers: await getHeaders(options),
                method: 'GET',
                data: options.body
             }).then((response)=>{
                return(response)
             }).catch((err)=>{
                return(err.response)
      })
)

Note: Coinbase Pro and its API will be discontinued by the end of 2022. However, Coinbase exchange and its API will still be accessible at . Pro users will be transitioned to Advanced Trading on the main platform, using oAuth for API linkage or standard keys for personal projects.

Guidelines for accessing the Coinbase exchange API from a localhost

Answer №1

Answer №2

Similar questions

Utilizing Stored Variables and Random Numbers in Selenium IDE

Why does Froala Editor not maintain formatting when retrieving data from the database?

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

I am trying to access a value saved in a service in Angular 8 component and use it in other services. Can anyone help

Redirecting JavaScript form to search engine

VueJS does not show a component if it is contained within a v-if or v-show directive

Images are not being shown by Glide JS

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Executing multiple nested `getJSON` requests in a synchronous manner using jQuery

Intersecting object identification, fresh Function

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

Visuals and PDF Generation Tool

Can you share the method for concatenating an object at a specific index within an Array using JavaScript?

Is there a way for me to determine if the HTML code is creating a new line?

Adjusting the content within a text area using an AngularJS service

Deliver a message using a loop in jade

Issue with validating alphanumeric value with multiple regex patterns that allow special characters

Error: Headers cannot be set after they have already been sent, resulting in an Unhandled Promise Rejection with rejection id 2

Tips for maintaining the particles.js interaction while ensuring it stays under other elements

Utilizing map in React JS to simultaneously execute various functions