我正在开发一个网站,应该是响应,以便人们可以从他们的手机访问它。该网站有一些安全的部分,可以登录使用谷歌,Facebook,…等(OAuth)。
服务器后端是用ASP开发的。Net Web API 2,前端主要是AngularJS加上一些Razor。
对于身份验证部分,在包括Android在内的所有浏览器中,一切都很好,但谷歌身份验证在iPhone上不起作用,它给我这个错误消息
Refused to display 'https://accounts.google.com/o/openid2/auth
?openid.ns=http://specs.openid.ne…tp://axschema.org/namePerson
/last&openid.ax.required=email,name,first,last'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
现在就我而言,我没有在我的HTML文件中使用任何iframe。
我搜索了一下,但没有答案让我解决这个问题。
我在Angular 9中也遇到了同样的问题。以下是我做的两步:
Change your YouTube URL from https://youtube.com/your_code to https://youtube.com/embed/your_code.
And then pass the URL through DomSanitizer of Angular.
import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: "app-help",
templateUrl: "./help.component.html",
styleUrls: ["./help.component.scss"],
})
export class HelpComponent implements OnInit {
youtubeVideoLink: any = 'https://youtube.com/embed/your_code'
constructor(public sanitizer: DomSanitizer) {
this.sanitizer = sanitizer;
}
ngOnInit(): void {}
getLink(){
return this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeVideoLink);
}
}
<iframe width="420" height="315" [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
在PHP文件(index.php)中,将这一行添加到顶部
<?php
header('Cross-Origin-Embedder-Policy: require-corp | same-site | same-origin | cross-origin');
?>
如果还是不行,试试这个
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Origin: *");
header('Cross-Origin-Opener-Policy: same-origin');
header('Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin');
header('Cross-Origin-Embedder-Policy: require-corp | same-site | same-origin | cross-origin');
?>