CODEWITHSUNDEEP
reactjsruby-on-railsaxiosdevisedevise-jwt
Jacqui
Jacqui

Reputation: 21

POST method resulting in 401 Axios error rails/react app

This is the first Rails/React app I've built and of course have hit a roadblock. I've been stuck here for a few days without success so hoping to get some help to understand what's going on and move forward.

I have been attempting to perform a POST function for user comments with the FE (React JS) & BE (Rails 6) with the use of Axios. Authentication has been established with the use of devise and devise-jwt gems, which appear to be working.

I have tested this functionality in both Postman and http.client in VSCode and both have posted successfully, however when I attempt to perform a POST request from my local server (with React) I get a 401 error suggesting I need to sign-in or signup before continuing.

I have reviewed the headers, confirmed a token is generated and also checked the access points. Followed the docs for setting up both gems and also the following site https://github.com/dakotalmartinez/rails-devise-jwt-tutorial

I am sure it is something small I'm missing but is a big key to moving forward.

Below is a snapshot of the Network Headers:

**General**
Request URL: http://localhost:4000/comments
Request Method: POST
Status Code: 401 Unauthorized
Remote Address: [::1]:4000
Referrer Policy: strict-origin-when-cross-origin

**Request Headers**
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: "Bearer ***************************"
Connection: keep-alive
Content-Length: 68
Content-Type: application/json
Host: localhost:4000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

src/commentServices:

export async function createComment(data) {
  const { user_id, wine_listing_id } = data;
  const payload = {
    comment: { user_id, wine_listing_id, user_comment: data.comment },
  };
  const response = await grapeVineAPI.post("/comments", payload);
  return response.data;
}

src/config/api.js:

import axios from "axios";

const grapeVineAPI = axios.create({
  baseURL: "http://localhost:4000",
});


grapeVineAPI.interceptors.request.use((req) => {
  const token = sessionStorage.getItem("token");

  if (token) {
    req.headers["Authorization"] = `${token}`;
  }
  return req;
});

export default grapeVineAPI;

Upvotes: 0

Views: 238

Answers (0)

Related Questions