为什么我会得到“访问控制允许来源”的错误

Question

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

XMLHttpRequest无法加载https://www.test.org/publicclass/index.html.请求的资源上不存在“访问控制允许源”标头。因此不允许访问源“http://localhost:8080”。

我们如何解决这个问题。

脚本:

 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

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

您可以在这里了解更多关于SOP的信息

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

为了克服这个问题，您可以使用chrome的CORS插件。这将解决您的问题。

Answer 2

服务器位于https://www.test.org/publicclass/index.html需要提供一个标题，告诉浏览器允许您的站点向他们请求数据。它应该发送一个标题，如下所示，并带有响应-

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

然后，您将能够使用该URL中的资源进入您的页面。

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