it-swarm.com.de

XMLHttpRequest kann XXXX aufgrund von Zugriffskontrollprüfungen nicht laden, wenn Angular Material MD Stepper verwendet wird

Meine Anwendung funktionierte bis vor etwa einer Stunde einwandfrei. Jetzt bin ich offenbar im Zögern, herauszufinden, warum bestimmte https-Anfragen nicht alle Browser außer Chrome Web verwenden. Meine erste Annahme ist CORS. Ich habe Origin-Header und alles so eingerichtet, wie ich es seit einiger Zeit hatte. Ich bin nicht sicher, was sich geändert hat. 

Hier ist der Fehler, den ich auf Safari bekomme 

XMLHttpRequest kann http: // localhost: 3000/auth/server/signup aufgrund von Zugriffskontrollprüfungen nicht laden.

Hier ist meine 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 ist eine var als korrekte URL.

Hier sind die Aufrufe im Knoten, die nicht funktionieren 

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;

Anforderungen funktionieren für andere HTTP-Anforderungen, und die angegebene URL, die ich im Fehlerbericht angegeben habe, ist dieselbe/korrekte URL. Ich bin jetzt schon eine Weile fest und brauche dringend Hilfe. Ich habe keine Ahnung, wie ich das debuggen kann. Außerdem wird die Seite jedes Mal aktualisiert, wenn ich die Anforderung versuche. Ich bin nicht sicher, was ich tun soll.


Der letzte Weg für Social Login funktioniert? Nur die Anmeldung und Anmeldung, die betroffen sind

Hier ist mein clientseitiger Code, an den die http-Anforderungen gesendet werden

@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 Ich habe den Anmeldebutton von innen aus dem eckigen md-step-Element nach außen verschoben und es hat gut funktioniert. Nicht sicher, was hier los ist, aber dies scheint das Problem zu sein.

Hier ist der Code von oben, der das CORS-Problem in anderen Browsern als Chrome verursacht

<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>
7
Jonathan Corrin

Jeder, der dieses Problem mit md-step oder Stepper in Google Material hat. Versuchen Sie, jedem Schritt type = "button" hinzuzufügen. Ich finde es seltsam, dass ich einen CORS-Fehler erhalten habe, aber es hat funktioniert.

1
Jonathan Corrin

Jonathan Antwort scheint richtig zu sein. Anscheinend hat Apple entschieden, dass ein HTML-Button nur ein Button ist, wenn es type = "button" hat, selbst wenn type = submit den gleichen Fehler auslöst ...

2
David Cardoso