All geek questions in one place

XMLHttpRequest cannot load XXXX due to access control check When using Angular MD Stepper Material

My application worked fine up to an hour ago. Now it seems to me that I do not understand why specific https requests do not work with all browsers aside from the chrome network. My first guess is CORS. I have the initial headlines and everything that I had for a while. I'm not sure what has changed.

Here is the error I get on Safari

XMLHttpRequest cannot load http: // localhost: 3000 / auth / server / signup due to access control checking.

Here is my 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 is var as the correct URL.

Here are the calls in the node that do not work

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;

HTTP-, URL-, , , / URL-. . , . , , . , .

? ,

, HTTP-

@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');
            });
      })
    }
  }

}

*** md-step , , . , , , , .

, CORS -

<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>
+6
3

, md-step Stepper google. = "button" . , CORS, .

+1

. , Apple , html - , = "button", = submit ...

+2

type = "submit", , submit, event.preventDefault()

function handleSubmit (event) {
  event.preventDefault()
  ...whatever you want to do
}

<form onSubmit={this.handleSubmit}>
  <button type="submit" />
</form>
0

Source: https://habr.com/ru/post/1686375/

More articles:


All Articles