XMLHttpRequest ne peut pas charger XXXX en raison des contrôles de contrôle d'accès Lors de l'utilisation de matériau angulaire MD Stepper

Question

Mon application a fonctionné parfaitement jusqu'à il y a environ une heure. Maintenant, je semble être dans les limbes à propos de comprendre pourquoi les demandes spécifiques https ne fonctionnent pas tous les navigateurs en dehors de Chrome Web. Ma première hypothèse est CORS. J'ai des en-têtes d'origine et tout a été mis en place comme je l'ai fait depuis un certain temps. Je ne suis pas sûr de ce qui a changé.

Voici l'erreur que je reçois sur Safari

XMLHttpRequest ne peut pas charger http://localhost:3000/auth/server/signup en raison des vérifications de contrôle d'accès.

Voici mon CORS middleware

app.use(function (req,res,next) { 
    res.header("Access-Control-Allow-Origin", devUrl); 
    res.header('Access-Control-Allow-Methods', 'PUT, PATCH, GET, POST, DELETE, OPTIONS'); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.setHeader('Access-Control-Allow-Credentials', true); 
    next(); 
}); 

devUrl est un var que l'URL correcte.

Voici les appels dans le nœud qui ne fonctionnent pas

var express = require('express'); 
var router = express.Router(); 
var authController = require('../controllers').auth; 
var jwt = require('jsonwebtoken'); 


router.post('/server/signup', function(req,res,next) { 
    return authController.signup(req,res); 
}); 

router.post('/server/signin', function(req,res,next) { 
    return authController.signin(req,res); 
}); 

router.post('/server/social-signin', function(req,res,next) { 
    return authController.authSignin(req,res); 
}); 


module.exports = router; 

Les demandes travaillent pour d'autres requêtes http et l'URL que je déclare dans l'erreur est l'URL même/correct. Je suis coincé depuis un moment et sérieusement besoin d'aide. Je n'ai aucune idée de comment déboguer cela. En outre, il actualise la page chaque fois que j'essaye la demande aussi bien. Je ne suis pas sûr de ce qu'il faut faire.

---

La dernière route pour la connexion sociale fonctionne? Son seul signe et inscrivez-vous qui sont touchés

Voici mon code côté client où les requêtes http sont envoyées

@Component({ 
    selector: 'app-signin', 
    template: `  
    <!-- Main container --> 
    <md-toolbar> 
     <h5 style="margin: 0 auto;font-family: 'Ubuntu', sans-serif;">Signin</h5> 
    </md-toolbar> 
    <section class="section"> 
     <md-horizontal-stepper [linear]="isLinear" *ngIf="!loggingin" style="text-align: center; max-width: 500px; margin: 0 auto"> 
     <md-step [stepControl]="firstFormGroup"> 
      <form [formGroup]="firstFormGroup"> 
      <ng-template mdStepLabel>Email</ng-template> 
      <md-form-field> 
       <input mdInput placeholder="Enter Email" formControlName="firstCtrl" [(ngModel)]="user.email" required> 
      </md-form-field> 
      <div> 
       <button md-button mdStepperNext><p class="p2">NEXT</p></button> 
      </div> 
      </form> 
     </md-step> 
     <md-step [stepControl]="secondFormGroup"> 
      <form [formGroup]="secondFormGroup"> 
      <ng-template mdStepLabel>Password</ng-template> 
      <md-form-field> 
       <input type="password" mdInput placeholder="Enter Password" formControlName="secondCtrl" [(ngModel)]="user.password" required> 
      </md-form-field> 
      <div> 
       <button md-button mdStepperPrevious><p class="p2">BACK</p></button> 
       <button md-button (click)="onSignin('rent')"><p class="p2">SIGNIN</p></button> 
      </div> 
      </form> 
     </md-step> 
     </md-horizontal-stepper> 

     <p style="text-align: center; font-size: x-large" *ngIf="!loggingin">signin with social</p> 

     <div style="margin: 30px auto; text-align: center" *ngIf="!loggingin"> 
     <button md-mini-fab 
       (click)="onSignin('facebook')" style="background-color: #3b5998!important;"> 
      <span class="fa fa-facebook" style="font-size: x-large; color: white;"></span> 
     </button> 
     <button md-mini-fab 
       (click)="onSignin('google')" style="background-color: #D84B37!important;"> 
      <span class="fa fa-google" style="font-size: x-large; color: white;"></span> 
     </button> 
     </div> 
    </section> 
    <button md-raised-button (click)="test()">TEST</button> 
    <md-spinner *ngIf="loggingin" style="margin: 30px auto"></md-spinner> 
    `, 
    styleUrls: ['./user.component.css'] 
}) 
export class SigninComponent implements OnInit { 
    loggingin = false; 
    user: User = { 
    email: '', 
    password: '', 
    image: '', 
    name: '', 
    provider: '', 
    uid: '' 
    }; 
    signin = false; 
    contact = false; 
    isLinear = true; 
    firstFormGroup: FormGroup; 
    secondFormGroup: FormGroup; 



    constructor(
    private _formBuilder: FormBuilder, 
    private userS: UserService, 
    private uis: UiService, 
    private authS: MyAuthService, 
    private router: Router) { } 

    ngOnInit() { 
    this.firstFormGroup = this._formBuilder.group({ 
     firstCtrl: ['', Validators.required] 
    }); 
    this.secondFormGroup = this._formBuilder.group({ 
     secondCtrl: ['', Validators.required] 
    }); 
    } 


    test() { 
    let newUser = new User (
     null, 
     'XXXX', 
     'XXXX' 
    ); 
    console.log(newUser); 
    this.authS.onSignin(newUser) 
     .subscribe(data => { 
     console.log(data); 
     localStorage.setItem('token', data['token']); 
     localStorage.setItem('userId', data['userId']); 
     }) 
    } 


    onSignin(s: string) { 
    this.loggingin = true; 
    if (s === 'rent') { 
     this.authS.onSignin(this.user) 
     .subscribe(user => { 
      localStorage.setItem('token', user['token']); 
      localStorage.setItem('userId', user['userId']); 
      this.userS.getUser() 
      .subscribe(user => { 
       if (user.needsToRate !== 0) { 
       this.router.navigate(['/review']); 
       this.uis.onFlash('Signed In Successfully', 'success'); 
       this.loggingin = false; 
       } else if (!user.finishedTutorial) { 
       this.router.navigate(['/tutorial']); 
       this.uis.onFlash('Signed In Successfully', 'success'); 
       this.loggingin = false; 
       } else { 
       this.router.navigate(['/']); 
       this.uis.onFlash('Signed In Successfully', 'success'); 
       this.loggingin = false; 
       } 
      }, resp => { 
       console.log(resp); 
      }); 
     }, err => { 
      console.log(err); 
      if (err.status === 404) { 
      this.loggingin = false; 
      this.uis.onFlash('Email Not Found', 'error'); 
      } else if (err.status === 401) { 
      this.loggingin = false; 
      this.uis.onFlash('Incorrect Username or Password', 'error'); 
      } else { 
      this.loggingin = false; 
      this.uis.onFlash('Error Signing In', 'error'); 
      } 
     }); 
    } else { 
     this.authS.authSignin(s) 
     .subscribe(authUser => { 
      this.authS.onAuthToken(authUser) 
      .subscribe(token => { 
       localStorage.setItem('token', token['token']); 
       localStorage.setItem('userId', token['userId']); 
       this.userS.getUser() 
       .subscribe(user => { 
        if (user.needsToRate !== 0) { 
        this.router.navigate(['/review']); 
        this.uis.onFlash('Signed In Successfully', 'success'); 
        this.loggingin = false; 
        } else if (!user.finishedTutorial) { 
        this.router.navigate(['/tutorial']); 
        this.uis.onFlash('Signed In Successfully', 'success'); 
        this.loggingin = false; 
        } else { 
        this.loggingin = false; 
        this.router.navigate(['/']); 
        setTimeout(() => { 
         location.reload(); 
        },500); 
        this.uis.onFlash('Signed In Successfully', 'success'); 
        } 
       }, resp => { 
        console.log(resp); 
       }); 
      }, error => { 
       console.log(error); 
       this.loggingin = false; 
       this.uis.onFlash('Error Signing In', 'error'); 
      }); 
     }) 
    } 
    } 

} 

*** Mise à jour je me suis déplacé le bouton signin à l'intérieur du matériau angulaire md -step élément à l'extérieur et ça a bien fonctionné. Je ne sais pas ce qui se passe ici mais cela semble être le problème.

Voici le code ci-dessus de l'origine du problème CORS sur les navigateurs web non chromés

<md-horizontal-stepper [linear]="isLinear" *ngIf="!loggingin" style="text-align: center; max-width: 500px; margin: 0 auto"> 
      <md-step [stepControl]="firstFormGroup"> 
       <form [formGroup]="firstFormGroup"> 
       <ng-template mdStepLabel>Email</ng-template> 
       <md-form-field> 
        <input mdInput placeholder="Enter Email" formControlName="firstCtrl" [(ngModel)]="user.email" required> 
       </md-form-field> 
       <div> 
        <button md-button mdStepperNext><p class="p2">NEXT</p></button> 
       </div> 
       </form> 
      </md-step> 
      <md-step [stepControl]="secondFormGroup"> 
       <form [formGroup]="secondFormGroup"> 
       <ng-template mdStepLabel>Password</ng-template> 
       <md-form-field> 
        <input type="password" mdInput placeholder="Enter Password" formControlName="secondCtrl" [(ngModel)]="user.password" required> 
       </md-form-field> 
       <div> 
        <button md-button mdStepperPrevious><p class="p2">BACK</p></button> 
        <button md-button (click)="onSignin('rent')"><p class="p2">SIGNIN</p></button> 
       </div> 
       </form> 
      </md-step> 
      </md-horizontal-stepper> 

Answer 1

Toute personne ayant cette question avec pas ou MD Stepper en matériel google. Essayez d'ajouter type = "button" à chaque étape. Je trouve étrange que je recevais une erreur CORS mais cela a fonctionné.

Answer 2

La réponse de Jonathan semble correcte. Apparemment Apple a décidé qu'un bouton html est seulement un bouton s'il a type = "button" même le type = submit va lancer la même erreur ...