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

问题描述：

我的应用程序一直工作到大约一个小时之前。现在，我似乎很难理解为什么特定的https请求不适用于除chrome web之外的所有浏览器。我的第一个假设是CORS。我有一段时间的原始标题和一切设置。我不知道发生了什么变化。由于访问控制检查，XMLHttpRequest无法加载XXXX当使用Angular Material MD步进器时

这里是我在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是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。我一直困扰了一段时间，认真需要帮助。我不知道如何调试。而且，每次我尝试请求时都会刷新页面。林不知道该怎么做。

社交登录的最后一条线路正在工作？它唯一的登录和注册受影响

这里是我的客户端代码在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'); 
      }); 
     }) 
    } 
    } 

}

*** UPDATE 我从角材料MD内移动的登入按钮步骤元素外面它，它工作得很好。不知道这里发生了什么，但这似乎是问题。

下面是从上述非镀铬web浏览器导致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”请求？ – Phil

我的客户端发送包含POST，GET等选项，然后执行。我上传一些代码。这是一个奇怪的错误。我最近将我的应用程序切换为使用Angular Material进行造型。这似乎是问题来自使用md-step模块？我上传了一些代码，但我尝试了相同的请求作为一个测试按钮与硬编码登录信息，它的工作peferctly –

答

具有在谷歌材料MD-步或步进这个问题的任何人。尝试为每个步骤添加type =“button”。我觉得很奇怪，我收到了一个CORS错误，但它工作。

答

乔纳森的答案似乎是正确的。显然，苹果公司认为，即使type = submit也会抛出相同的错误，只有一个html按钮才是一个按钮......

是的。超级跛脚。 –

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

相关推荐