使用 Angular Material MD Stepper 时，由于访问控制检查，XMLHttpRequest 无法加载 XXXX

Posted 2023-03-04

【中文标题】使用 Angular Material MD Stepper 时，由于访问控制检查，XMLHttpRequest 无法加载 XXXX

【英文标题】：XMLHttpRequest cannot load XXXX due to access control checks When using Angular Material MD Stepper

【发布时间】：2018-03-07 03:16:17

【问题描述】：

我的应用程序一直运行良好，直到大约一个小时前。现在我似乎在搞清楚为什么特定的 https 请求不能在除了 chrome web 之外的所有浏览器中运行。我的第一个假设是 CORS。我有原始标题和所有设置，因为我已经有一段时间了。我不确定发生了什么变化。

这是我在 Safari 上遇到的错误

由于访问控制检查，XMLHttpRequest 无法加载 http://localhost:3000/auth/server/signup。

这是我的 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 是作为正确 URL 的 var。

以下是节点中不起作用的调用

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 元素内部移到了外部，它工作正常。不知道这里发生了什么，但这似乎是问题所在。

这是导致非 Chrome 网络浏览器出现 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>

【问题讨论】：

您的客户端代码是什么样的？您的服务器端代码是否设置为响应 OPTIONS 请求？

我的客户端发送包含 POST、GET 等的选项然后执行。生病上传一些代码。这是一个奇怪的错误。我最近将我的应用程序切换为使用 Angular Material 进行样式设置。似乎问题来自使用 md-step 模块？我会上传一些代码，但我尝试了与测试按钮相同的请求，其中包含硬编码的登录信息，并且效果很好

嗨 @JonathanCorrin 我有同样的问题，我在服务器端使用 hapi.js 和 reactjs 应用程序客户端。你能告诉我服务器端和客户端配置有什么更新吗？

【参考方案1】：

任何人在谷歌材料中遇到 md-step 或 Stepper 的问题。尝试将 type="button" 添加到每个步骤。我发现很奇怪我收到了 CORS 错误，但它确实有效。

【参考方案2】：

乔纳森的回答似乎是正确的。显然，Apple 决定一个 html 按钮只是一个按钮，如果它有 type="button" 即使 type=submit 也会抛出同样的错误......

【讨论】：

是的。超级蹩脚。