Having difficulties achieving successful API requests in Next.js and Snipcart

I'm currently diving into the world of Snipcart, and I'm encountering some issues connecting to your API. I'm using Next.js and haven't been able to find any solutions on the forum or in the documentation that address my specific problem. Whenever I make a call with getServerSideProps, I receive an unhandled rejection error stating: "Request failed with status code 404." It seems like I'm not authorized to connect, even though I've followed the steps provided in the docs and put in my secret API key. Here's a snippet of my code:

const secret = Buffer.from(process.env.SNIPCART_API_ID).toString('base64');
    const url = 'https://api.snipcart.com/api/products';
    const config = {
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Basic${secret}`,
        },
    };
    axios.get(url, config).then((result) => {
        console.log(result);
    }); 
Any help or guidance would be greatly appreciated! 😁 Thanks!

Answer №1

According to the API documentation:

const secret = "YOUR_SECRET_API_KEY"

const request = await fetch('https://app.snipcart.com/api/orders', {
    headers: {
        'Authorization': `Basic ${btoa(secret)}`,
        'Accept': 'application/json'
    }
})

const result = await request.json()

After analyzing the code, two things stand out:

  1. The header is specified as "Accept" not "content-type".
  2. There seems to be a missing space in the Authorization Header, but it's unclear if this affects template strings.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to showcase corresponding information for an item contained within an array?

I'm working with a function that is designed to retrieve specific descriptions for objects nested within an array. The purpose of the function (findSettings()) is to take in an array (systemSettings) and a key (tab12) as arguments, then use a switch s ...

Guide to retrieving a string value rather than Json output with a mongodb aggregate function

I have a function that retrieves the value of the 'minHospitalization' field from the database. The response from this function is '[{"minHospitalization":1}]' Instead of returning the value in JSON format, I want to return just ' ...

I am encountering challenges with React.js implemented in Typescript

Currently, I'm grappling with a challenge while establishing a design system in ReactJS utilizing TypeScript. The issue at hand pertains to correctly passing and returning types for my components. To address this, here are the steps I've taken so ...

``Can you share your insights on transferring data from one controller to a service, and then accessing that data on another controller during the same

I'm encountering an issue with passing data from one controller to another using a service. To achieve this, I have implemented prototype inheritance using the $rootScope in my controller and broadcasting the object so that other controllers can acce ...

Is there a way to simulate the parameters of a method callback from an external dependency in Nodejs

Imagine a scenario where I have the following structure: lib/modules/module1.js var m2 = require('module2'); module.exports = function(){ return { // ... get: function(cb){ m2.someMethod(params, function(error, ...

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

I am currently working on a todo list project using the MERN stack with Redux for state management. One issue I am facing is that the checkboxes for completed tasks are not reflecting the correct state from Redux when the page loads. Even though some tasks ...

Please be patient for the PayPal script to load on the nextjs page

I've encountered an issue with my code that is meant to display PayPal buttons <Head> <script src="https://www.paypal.com/sdk/js?client-id=KEY"></script> </Head> The PayPal buttons are loaded within the ...

Sails.js: Issue with unintended premature sending of 200 response before desired response is sent

While working with Sails.js version 1.2.3, I encountered an issue where I was unable to send data from a file as a response to a GET request over HTTP or WebSockets. It seems that regardless of whether I access the file synchronously or asynchronously in t ...

Modify the NAME attribute when clicked using Jquery

I am attempting to modify the NAME attribute of a DIV with the text from a textbox using jQuery. Take a look at my code snippet: http://jsfiddle.net/e6kCH/ Can anyone help me troubleshoot this issue? ...

Carousel-Owl, glide through two items simultaneously

I am currently in the process of developing a slider using the beta version of Owl-Carousel 2, but I am encountering several issues. My goal is to configure the owlCarousel to function as follows: It should scroll through 2 items at a time while displayin ...

Organize Development and Production files in npm or webpack for improved efficiency

In React Native projects, we typically use index.android.js and index.ios.js to differentiate between the same file for Android and iOS platforms. But I wonder if it's possible to separate files based on the development and production environments as ...

Transferring information within React components

Looking for some assistance with the code below. I'm facing an issue where the data is not being submitted along with the form, even though the correct values are displayed in the form. I have included a user query to fetch data from another object an ...

Using Regular Expression in JavaScript to replace variables within a string

Looking for assistance to replace keywords in a string with pre-defined variables. Currently, the code only displays variable names instead of their content. Can anyone provide help? Desired Output: 1111Test1 2222Test2 3333Test3 Current Output ...

What is the best way to obtain the output of a JavaScript function on the server side?

I'm dealing with a JavaScript function that returns an array in this particular format: <script type="text/javascript"> function looping() { var column_num = 1; var array = []; $("#columns ul").not(" ...

Tips for testing "defineAsyncComponent" in Vue 3:

Suppose I need to unit test this utility function. I am utilizing Vue 3, however, this code resides in a "regular" JavaScript file rather than an SFC. How can I go about doing that? function getDynamicComponent() { if (...) { return defineAsyncComp ...

What is the best way to conceal a specific class of DIV within a container, and how can I also hide another DIV within the same container by

I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this wo ...

Learn the process of effortlessly transferring user information to a MongoDB database

Using socket.io, I am broadcasting geolocation data (lat, lng) and updating the marker icon on a map every time a user connects to the app. When a user from Japan connects, their position is shared with me and vice versa. The issue arises when I only want ...

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

Exploring the attributes of cycled values in Vue.js

Currently, I am iterating over a list as shown below: <li v-for="item in filteredParentItems" v-if="item.action === 'list'" v-on:click="getNextPath" v-bind:data-next-path="item.nextPath" v-bind:data-action="item.action ...