Question

我正在创建一个小应用程序，使用angular cli从网站网址获取html内容。我添加了导入的所有必需文件，但我收到此错误：

XMLHttpRequest无法加载 https://www.test.org/publicclass/index.html。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:8080＆＃39;因此是不允许的访问。

我们如何解决这个问题。

脚本：

 import { Component, OnInit } from '@angular/core'; 
 import { HttpClient } from '@angular/common/http';  
 import * as jQuery from 'jquery';   
 import { Http, Headers, RequestOptions } from '@angular/http'; 

 @Component({
  selector: 'app-bodycontent',
  templateUrl: './bodycontent.component.html',
  styleUrls: ['./bodycontent.component.css']
 })  
 export class BodycontentComponent implements OnInit { 
 title = 'app';
 results = '';
 constructor(private http: HttpClient){
 }
 ngOnInit(): void {

 let headers = new Headers({ 'Content-Type': 'text/html' });
 let options = new RequestOptions({ headers: headers });
 this.http.get('https://www.test.org/publictest/index.html').subscribe(html => {
  alert(html);
 });
 } 
}

Answer 1

https://www.test.org/publicclass/index.html处的服务器需要提供一个标题，告知浏览器您的站点可以从中请求数据。它应该发送一个类似下面的标题与响应 -

Access-Control-Allow-Origin: http://localhost:8080

然后您就可以将该网址中的资源用于您的网页。

或者，如果仅适用于您的本地环境，则可以使用浏览器扩展（几乎适用于所有主流浏览器），以帮助绕过此限制。你可以使用它们。

Answer 2

出于网络安全目的，所有浏览器都遵循 SOP（同源政策）

您可以了解有关SOP here

的更多信息

因此，如果您为应用程序提取Web服务响应而不遵守这些SOP规则，则会在控制台中看到这些错误。

要克服这一点，您可以将 CORS插件用于chrome。这将解决你的问题。

为什么我得到了“访问控制 - 允许 - 来源”＃39;错误

2 个答案: