Cookie authentication in CodeIgniter with Angular HTTP requests in Ionic 3

I am experiencing difficulties sending POST/get requests to the server. When using the Postman Chrome extension, everything works fine. However, when attempting to use Angular Http (not HttpClient) in Ionic, I encounter errors. The first error is related to cross-origin allowance, which can be resolved by .htaccess configuration. However, the second error pertains to the presence of a ci_session cookie from using CodeIgniter on the backend (which was purchased from Codecanyon). It seems that Angular Http does not handle this cookie issue as expected, and while there may be other solutions available, they are not easily understood. Here is the error message:

Request URL: http://kalaatmgouna.com/endpoint/appusers/login/
Request Method: POST
Status Code: 403 Forbidden
Remote Address: 198.54.126.89:80
Referrer Policy: no-referrer-when-downgrade
Response Headers:
Access-Control-Allow-Origin: *
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Content-Length: 43
Content-Type: application/json; charset=utf-8
Date: Tue, 24 Oct 2017 20:28:29 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Server: Apache
Set-Cookie: ci_session=c8873af6f63764f3bfbf80e8c0a43b3659852053; expires=Tue, 24-Oct-2017 22:28:30 GMT; Max-Age=7200; path=/; HttpOnly
X-Powered-By: PHP/5.6.31
Request Headers:
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,ar;q=0.2
Connection: keep-alive
Content-Length: 86
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
DNT: 1
Host: kalaatmgouna.com
Origin: http://localhost:8100
Referer: http://localhost:8100/
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Mobile Safari/537.36

Form Data:
{
 "X-API-KEY": "testkey",
 "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acd8c9dfd8ecc9c1cdc5c082d4d5d6">[email protected]</a>",
 "password": "********"
}

Answer №1

HTTP status code: 403 - Your server side is rejecting the request, please investigate. CORS configuration seems to be working correctly.

Answer №2

To implement authentication in Angular, you must integrate JWT Auth

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

Encountering a compilation error while trying to utilize a union type in a function parameter within an

As stated on https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html, it is recommended to utilize multiple types for a parameter in a function (refer to the union part) /* OK */ interface Moment { utcOffset(): number; ...

Issue with assigning Type (Date|number)[][] to Array<,Array<,string|number>> in Angular with typescript and google charts

Currently, I am utilizing Angular 8 along with the Google Charts module. My latest endeavor involved creating a Google Calendar Chart to complement some existing Google charts within my project. However, upon passing the data in my component.html file, I ...

Following the upgrade of Angular, the webpack module source-map-loader is encountering an error: "this.getOptions is not a function"

Currently in the process of constructing my angular project using webpack alongside source-map-loader to extract source maps, like this: module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: "pre&quo ...

The Angular router seems to be refusing to show my component

My Angular 2 App includes a Module called InformationPagesModule that contains two lazy load components (Info1 Component and Info2 Component). I would like these components to load when accessing the following routes in the browser: http://localhost:4200/ ...

"Exploring the process of implementing a fixed method POST in Angular 5

When developing an application for Portal, I encountered an issue where a newly created role is not displayed without refreshing the browser. How can I ensure that the added element is directly displayed in the table without needing to refresh the browser? ...

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one. In the code snippet provided, the delay is se ...

Guide to retrieving the previous URL in Angular 2 using Observables

Can someone help me retrieve my previous URL? Below is the code snippet I am working with: prev2() { Promise.resolve(this.router.events.filter(event => event instanceof NavigationEnd)). then(function(v){ console.log('Previous ' ...

Rendering Information in Angular 4 Through Rest API

Encountering issues displaying data from my local express.js REST API, organized as follows: people: [{ surname: 'testsurname', name: 'testname', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

A comprehensive guide on enabling visibility of a variable within the confines of a function scope

In the code snippet shown below, I am facing an issue with accessing the variable AoC in the scope of the function VectorTileLayer. The variable is declared but not defined within that scope. How can I access the variable AoC within the scope of VectorTile ...

What is the process for including an object in an http.post request?

My contact object needs to be included in the http.post method. I'm struggling with where exactly to pass this contact parameter. Can you provide guidance on how to modify my code accordingly and also share any relevant links related to the http.post ...

Ways to sign up for the activeDate variable in MatCalendar so you can display the month and year labels of the current active date in the

As a newcomer to Angular, I am working on creating a datepicker with a customized header. I have successfully passed a custom header for the mat-calendar component. Reference: https://material.angular.io/components/datepicker/overview#customizing-the-calen ...

Generate a TemplateRef and place it into the template of the component

Inquiring about Angular 5.0.2 After reviewing the example provided on NgTemplateOutlet at https://angular.io/api/common/NgTemplateOutlet I am eager to discover if there is a method to dynamically generate a TemplateRef and then insert it into the componen ...

Obtain the coordinates of the pixel in an image on the canvas when a mouse

I am currently working on a project that involves using canvas. I have set a picture as the background of the canvas and would like to be able to get the original pixel point when clicking in the image area. In order to achieve this, I need to convert canv ...

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

In my Angular 2 and Typescript project, I am utilizing rxjs. The goal is to share a common web-resource (referred to as a "project" in the app) among multiple components. To achieve this, I implemented a service that provides an observable to be shared by ...

Error message "NoSuchKey" encountered on CloudFront when accessing an Angular application

I recently developed an Angular application and successfully uploaded it to an S3 bucket. To make my website accessible, I deployed a CloudFront distribution. However, when trying to access a specific route on the website (such as /login), I encountered an ...

Tips for streamlining interface initialization and adding items to it

I have designed an interface that includes another interface: export interface Parent { children: Child[]; } export interface Child { identifier: string; data: string; } Is there a more efficient way to initialize and add items to the array? Curren ...

Retrieving latitude and longitude from place id in an Angular Google Maps component

Currently utilizing the google-maps component to extract latitude and longitude from Google Maps prediction data. Additionally, I have integrated a search bar using google-maps component. I have successfully implemented a search bar with ngx-google-places ...

The art of connecting with Angular 2 router and Components

Here are the elements I have: <app-scrollable-area (scrolledDown)="..." class="scrollable-y"> <router-outlet></router-outlet> </app-scrollable-area> I'm wondering how to communicate this event (scrolledDown) to inside ...

Getting data sent via Ajax and jQuery through window.location.href in a new controller in CodeIgniter

How to retrieve ajax jquery data passed through window.location.href in a new controller using CodeIgniter? $(".x").on("click","a.p",function(){ productId = $(this).attr("productId"); alert("product ID : " + product ...

Encountered an issue with cookie handling during the process of authenticating users through supabase/ssr using Google OAuth

I am developing a Next.js project with the integration of Supabase. User authentication is done through Supabase clients using Google OAuth providers. I have followed the exact code from this GitHub repository: https://github.com/SamuelSackey/nextjs-supaba ...