Access denied: CORS issue causing Satellizer login error

I've been trying to set up the satellizer's local signup and signin feature. The signup process is working, but I noticed that it first sends an OPTIONS request before sending a POST request.

The issue arises when I attempt to log in, as I receive a 400 error with the Network tab indicating the use of "OPTIONS". I have gone through several questions on this topic and most suggest adjusting the server-side permissions.

As a result, I have made the following additions to the server side to allow any type of request:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Authorization"

Despite these changes, I am still encountering the same error.

This is my login controller located within a modal:

angular.module('auth').controller('LoginCtrl',function($rootScope, 
  $scope, $location, $localStorage, $auth, $modalInstance, 
  $modal){

  $scope.formData = {

   email:'',
   password:'',


  };

  $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);

    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
    };

  $scope.reset();

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };


$scope.login = function(){

   $auth.login({
      email: $scope.formData.email,
      password: $scope.formData.password,
      grant_type: 'password'
  }).then(function(res){
      alert('success, WELCOME ' + res.data.user.email + '!')
  }) .catch(function(err){
        alert(err.message)
  });
};


});

This is my app.js setup:

angular.module('app').config(function($stateProvider, $urlRouterProvider,
     $authProvider, 
    $httpProvider, urls) {

    /* Add New States Above */
    $urlRouterProvider.otherwise('/home');

    $authProvider.signupUrl = urls.BASE_API + '/Register';
    $authProvider.loginUrl = urls.BASE + '/Token';

});

If anyone could provide assistance with this issue, it would be greatly appreciated.

Answer №1

After some experimentation, I found that modifying the local.login and local.signin functions within satllizer.js directly resolved the issue:

 local.login = function(user, redirect) {
      var loginUrl = config.baseUrl ? utils.joinUrl(config.baseUrl, config.loginUrl) : config.loginUrl;
      return $http.post(loginUrl, $.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}})
        .then(function(response) {
          shared.setToken(response, redirect);
          return response;
        });
};

    local.signup = function(user) {
      var signupUrl = config.baseUrl ? utils.joinUrl(config.baseUrl, config.signupUrl) : config.signupUrl;
return $http.post(signupUrl,  $.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}})
        .then(function(response) {
          if (config.loginOnSignup) {
            shared.setToken(response);
          } else if (config.signupRedirect) {
            $location.path(config.signupRedirect);
          }
          return response;
        });
    };

To enhance the functionality, simply add the following code snippet to $http.post(loginUrl, $.param(user)):

$.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}}

Answer №2

Before implementing the Satilizer configuration in AngularJS, ensure to add the below line in the angular js config:

$authProvider.httpInterceptor = false;

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 iterate through my array of objects using a forEach loop and assign a value to the property of any object that has an empty string?

Inquiry for Part 1: I am currently exploring the use of forEach loop to iterate through an array of objects. My goal is to update the property "profile_image_url" of objects that have an empty string as its value, setting it to a default link ("/media/arti ...

Error Encountered when Attempting to Retry AI SDK on Vercel's

I've been implementing code from the official AI SDK website but unfortunately, the code is not functioning properly. The error message I'm encountering is: RetryError [AI_RetryError]: Failed after 3 attempts. Last error: Failed to process error ...

Ways to extract alt attribute from a converted object and assign it to an element

I'm trying to access the alt attribute of a child div using $this.find in jQuery, but I keep getting an error saying $this.find is not a function. const $ClickedCells = $(".board__cell--black"); function pawnMove() { const $this = $(this)[0] ...

What steps should I take to fix the error message stating "Module 'child-process-close' not found"?

Just when I was going about my usual business, ready to checkout generator-angular-fullstack... No red errors in sight but a message popped up at the end: Error: Cannot find module 'child-process-close'. I tried everything - uninstalling node, r ...

Troubles with Katex/ngx-markdown Display in Angular 16

In my Angular 16 application, I utilize the ngx-markdown library alongside Katex and other dependencies. A challenging situation arises when the backend (an LLM) responds with markdown text that conflicts with Katex delimiters during rendering. I attempte ...

Retrieving the page title within an iFrame

I'm attempting to retrieve the title of a page within an iFrame. After researching similar questions on Stack Overflow, I came across this code snippet: var title = $("#frame").contents().find("title").html(); alert(title);​ Initially, I believed ...

Tips for handling an AJAX form submission with various submit buttons and navigating through Laravel routes

I am having trouble getting the form below to submit to the database. The issue arises when trying to use AJAX to submit the forms. The problem seems to occur at this point: $(i).submit(function(event) { Can someone help me figure out what I am doing wr ...

Content will adjust to the screen size after a specific re-sizing

When the width is under 1024, I want the body of the page to scale to fit the user's screen without a scrollbar. My goal is to adjust the entire body so that it fits within the browser window without a scrollbar when the width is under 1024. I attempt ...

One-page website featuring a scrolling layout and a stable, constantly updating footer

My goal is to create a single-page, scrolling website that features an array of images with corresponding captions fixed at the bottom of the page. I plan on using unique image IDs to trigger a hide/show event as each image approaches a certain distance fr ...

Error encountered with React Hooks - TypeError

What I Aim to Achieve Our goal is to utilize Next.js to create a button named 'ConnectMetamask' that, upon clicking, triggers the predefined hooks and stores the value in a variable called 'userSigner'. This functionality is implemente ...

Tips for optimizing the performance of nested for loops

I wrote a for loop that iterates over 2 enums, sending them both to the server, receiving a value in return, and then calculating another value using a nested for loop. I believe there is room for improvement in this code snippet: const paths = []; for awa ...

AngularJS: Changes to the model do not automatically reflect in the view

Currently, I am developing a web-based Twitter client using Angular.js, Node.js, and Socket.io. Tweets are pushed to the client via Socket.io, where a service listens for new tweets. When a new tweet arrives, the service triggers an event using $broadcast. ...

Utilize AngularJS to convert datetime into decimal format

Can you help me understand how to convert a decimal number to a date in AngularJS? Here's an example: Source: 20150911141804 Expected Format: 2015-09-11 I'm trying to format this source number within a cellTemplate in ui-grid. Thank you! ...

Ways to delete the title from a box in orgChart

Is there a way to remove the title from the box and only show the content? I've searched extensively but haven't found a solution yet. I'm currently using orgChart: https://github.com/dabeng/OrgChart For example, the general manager box s ...

Error message "The function is not defined" is commonly encountered in node.js programming

I'm having trouble with this section of my code. The error message I receive is: ReferenceError: callback is not defined at C:\js\kweb-hw\routes\board.js:14:13 var express = require('express'); var router = express. ...

What is the best way to refresh a React ES6 component following an AJAX response?

I'm a beginner in React and ES6, trying to create a search field that fetches data as the user types. I want to make an AJAX call using the fetch API when the user types at least 3 characters in the field. When I run the fetch snippet code in the brow ...

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

Accessing objects from HTML elements in jQuery can be done using the `$

Is there a way to retrieve object options and functions from an HTML element? Here is the code snippet: $.fn.test = function(options){ var me = this; this.create = function(){ me.settings = $.extend({ foo: 'foo' }, options) ...

Watch mp4 clips in various languages with ExpressJs

I have a question regarding streaming videos within my local network. My mp4 files contain multiple audio tracks in different languages. Is there a way to select a specific audio track to stream? For instance, could you specify a language as a query parame ...

Searching for data across multiple tables using the Laravel framework combined with Vue.js and API integration

I am currently implementing a multi-search feature for a single table The search functionality is functioning correctly but only for one column Here is the snippet from my controller: public function index() { return Matter::when(request('sear ...