XMLHttpRequest ne peut pas charger XXXX en raison de contrôles de contrôle d'accès Lors de l'utilisation de Angular Material MD Stepper
Mon application a fonctionné parfaitement jusqu'à il y a environ une heure. Maintenant, il semble que je ne sache pas pourquoi certaines requêtes https ne fonctionnent pas avec tous les navigateurs, à l'exception de Chrome Web. Ma première hypothèse est la SCRO. J'ai des en-têtes Origin et tout est configuré comme je le fais depuis un certain temps. Je ne suis pas sûr de ce qui a changé.
Voici l'erreur que j'ai sur Safari
XMLHttpRequest ne peut pas charger http: // localhost: 3000/auth/server/signup en raison de contrôles de contrôle d'accès.
Voici mon middleware CORS
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 une var comme l'URL correcte.
Voici les appels dans le noeud 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 fonctionnent pour d’autres requêtes http et l’url indiqué dans l’erreur est le même/correct. Je suis coincé depuis un moment maintenant et j'ai sérieusement besoin d'aide. Je n'ai aucune idée de comment déboguer ceci. En outre, il actualise la page chaque fois que j'essaie de répondre à la demande. Je ne sais pas quoi faire.
Le dernier itinéraire pour la connexion sociale fonctionne ?? Sa seule connexion et inscription qui sont affectés
Voici mon code côté client où les demandes 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');
});
})
}
}
}
*** UPDATE J'ai déplacé le bouton de connexion de l'élément md-step en matériau angulaire vers l'extérieur et cela a bien fonctionné. Je ne sais pas ce qui se passe ici, mais cela semble être le problème.
Voici le code ci-dessus provoquant le 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>
Toute personne ayant ce problème avec md-step ou Stepper dans Google. Essayez d'ajouter type = "button" à chaque étape. Je trouve ça bizarre que je reçoive une erreur CORS mais cela a fonctionné.
La réponse de Jonathan semble correcte. Apparemment, Apple a décidé qu'un bouton html n'est qu'un bouton s'il a le type = "button" même si le type = submit envoie la même erreur ...