A status code of 200 indicates a successful login, which then leads to a 401 status code upon making a

Just recently, I successfully deployed a rails backend and a vue frontend to Heroku. Everything was working fine until today when I encountered a problem while trying to log in to the web app. Immediately after logging in, I started receiving 401 responses because the app should be displaying my comic books from the database.

To provide some context, I have been following a Vue.js/Rails tutorial on YouTube by WebCrunch. In this tutorial, localStorage is utilized along with JWTSessions and axios. I referred to a question on Stack Overflow titled HttpGet 401 status code followed by 200 status code, but it did not contain the answer I was looking for. Additionally, I attempted to solve the issue by adding trailing slashes to my API URLs without success. The tutorial also mentioned the use of an axios/index.js file in the Vue frontend that configured instances of the axios requests.

Below are snippets of code used in the application:

// Code snippets here

I originally faced CORS-related issues but do not believe they are related to the current problem. My CORS issue occurred due to incorrect URL input without https in the browser header. To rectify this, I included both https and http URLs as origins. The desired outcome is that users should be able to login or sign up without being immediately logged out due to lack of authorization. If additional code is required for further analysis, kindly let me know. Thank you in advance.

Edit2: comics_controller.rb

// More code snippet here

Edit: Log output

// Continued log output details
javascriptruby-on-railsvue.jshttp-status-code-401

Answer №1

Encountering a similar issue using the same source project, I noticed that the problem only arises in my production environment while it functions properly in the development setup. Upon investigation, I discovered that the issue lies within the signin_controller.rb

 if user.authenticate(params[:password])
      payload = { user_id: user.id }
      session = JWTSessions::Session.new(payload: payload, refresh_by_access_allowed: true)
      tokens = session.login
      response.set_cookie(JWTSessions.access_cookie,
                          value: tokens[:access],
                          httponly: true,
                          secure: Rails.env.production?)
                          )
      render json: { csrf: tokens[:csrf] }

Given that my site does not utilize HTTPS, I made the adjustment from secure: Rails.env.production? to secure: false, which resolved the issue.

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

What is the best way to prevent a window from opening when the required form fields are left blank?

Currently, I have a submit button on my form that triggers a jQuery function to open a window based on the user's selection. However, I only want the window to open if all the necessary fields are filled out. I have the existing code for this function ...

javascriptjquery

Struggling to make a JavaScript program that sums up odd numbers

Let's tackle this challenge: Your task is to create a program that adds up all the odd numbers between 1 and the number provided by the user. For instance, if the user inputs 7, the program should calculate 1 + 3 + 5 + 7. The result of this calculati ...

javascript

Learn how to show image information in a separate div by clicking on the image using jQuery

Is there a way to show or hide information of an image in a separate div by clicking on the image itself? $(document).ready(function () { $(".cell").click(function () { $(this).find("span").toggle("slow"); }) }); <div class="cell"> ...

javascriptjquery

What is the process for including or excluding a class from a horizontal scrollbar?

I've been trying to implement a back to top button on a horizontally scrolling page. However, I'm encountering difficulties in adding or removing the necessary class to show or hide the button. Here's the JavaScript code I'm using: $( ...

javascriptjqueryhtmlcsshorizontal-scrolling

Utilize modules within the AppModule to promote modularization and maintain separation of concerns in Angular 2

When using templates like those from the ASP.NET Core JavaScript services, typically a single module named AppModule is included. However, in my application, which is divided into two logical areas (AreaA and AreaB), I thought it would be better to use two ...

javascriptangularangular2-routingangular2-modules

After a certain time has passed, an event will occur once a div element has been assigned

Is there a way to show div2 only after div1 has been given the '.selected' class for a set duration, and then hide it again when div1 loses the '.selected' class? What would be the most efficient approach to achieve this? ...

javascriptjqueryeventstimer

What could be causing my button to not capture the value of this input text field?

After clicking the button, I am trying to log the value of the input text field in the console. However, it just shows up as blank. Despite checking my code multiple times, I can't seem to figure out why. Any insights would be greatly appreciated! &l ...

javascriptjquery

JQuery - Issue: Invalid syntax detected in the expression: #

I'm facing an issue with some tabs inside an accordion that don't seem to be functioning properly. The console is showing the following error: Error: Syntax error, unrecognized expression: # Despite searching for a solution online, I can&apos ...

javascriptjquery

Creating a dynamic div with various paragraphs using only Javascript

My goal is to dynamically generate paragraphs with their respective icons inside individual div elements. For instance, if the service API returns 30 items, I will create 30 div elements with the class "tile". However, if only one item is returned, then I ...

javascripthtmljsonclass

problems with using array.concat()

I am attempting to reverse a stream of data using a recursive call to concatenate a return array. The instructions for this problem are as follows: The incoming data needs to be reversed in segments that are 8 bits long. This means that the order of thes ...

javascriptarraysecmascript-6

Looking to dynamically set a background image using data fetched from an API in a ReactJS project

Looking to incorporate a background image from an API response in ReactJS Here is some sample code: useEffect(() => { axios.get(`https://apiaddress=${API_KEY}`) .then(res=>{ console.log(res); setRetrieved(res.data); console.log(retrieved ...

javascriptcssnode.jsreactjs

Tips for populating a textfield with data from a <select> dropdown using javascript

Is there a way to populate a textfield with data automatically based on information provided in the tab, utilizing JavaScript? Additionally, is it possible to prevent the filled data from being edited? The textfield should be able to dynamically fill data ...

javascripthtml

Navigating the same origin policy in Mozilla: A step-by-step guide

I have implemented YUI autocomplete in my project by creating a web service that provides suggestions. Everything works fine when both the application and the web service are deployed on the same machine. However, when I deploy the web service on a differe ...

javascriptautocompletesame-origin-policy

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

javascripttypescriptnext.js

The session in Express.js is not retained across different domains

I am currently developing a third-party application that will be utilized across multiple domains. My main goal is to manage a session per user who uses the app, which led me to implement the express-session module for this purpose. However, I encountered ...

javascriptnode.jsexpressexpress-session

Is it possible to generate a PNG blob using binary data stored in a typed array?

I have a piece of binary data that is formatted as a PNG image. I am looking to convert it into a blob, generate a URL for the blob, and then showcase it as an image in various places where an image URL can be used, such as CSS. My initial approach invol ...

javascripthtmlimageurl

Puppeteer: Locating elements using HTML attributes

I'm currently working on getting Puppeteer to locate an element on this webpage using its attribute data-form-field-value, which needs to match 244103310504090. Here is the HTML code for the button in question: <section class="fl-accordion-tab--c ...

javascriptnode.jspuppeteer

Utilizing Javascript Regular Expressions to extract specified parameters from URLs with specific patterns

I am facing a specific issue with pure vanilla javascript. My task is to extract the values of A, B & C from various URL patterns, excluding any instances where the value is "XX". A, B, and C are static words that can appear in different positions wit ...

javascriptnode.js

Revamp Child Relationship in Ruby on Rails Form

One of the challenges I'm facing is with editing and updating priorities for parent accounts in my application. The "Accounts" model acts as the parent, while the "Priorities" model serves as the child. Creating new priorities for these accounts is s ...

htmlruby-on-railsformsassociationsparent-child

Tips for incorporating input form values into Google Charts

I'm facing an issue with my code where I have created a form to display submitted values in the google chart. When trying to load drawChart() after clicking the submit button, the drawChart() function is getting called onload instead. Can someone help ...

javascriptjquerychartsgoogle-visualization