【发布时间】：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 应用程序客户端。你能告诉我服务器端和客户端配置有什么更新吗？
标签： javascript node.js google-chrome cors