Angular 2应用程序中没有“ Access-Control-Allow-Origin”标头

Webpack

Itachi

2020-03-24

对于这个项目,我只是学习和练习Angular2。我没有服务器端,并且正在向barchart ondemand api发出API请求

我想知道是否有可能绕过cors问题。我对这一切仍然很陌生,因此非常感谢您对婴儿进行操作!我正在使用http://localhost:8080

错误消息:(api键已注释掉)

XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&symbol=GOOG&type=daily&startDate=20150311000000. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

StockInformationService:

import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class StockInformationService {
    private apiRoot = "http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&";

    constructor (private _http: Http) {}

    getData(symbol: string): Observable<any> {
        // Tried adding headers with no luck
        const headers = new Headers();
        headers.append('Access-Control-Allow-Headers', 'Content-Type');
        headers.append('Access-Control-Allow-Methods', 'GET');
        headers.append('Access-Control-Allow-Origin', '*');

        return this._http.get(this.apiRoot + "symbol=" + symbol + "&type=daily&startDate=20150311000000", {headers: headers})
            .map(response => response.json());
    }
}

应用组件:

import {Component} from "angular2/core";
import {VolumeComponent} from '../../components/volume/volume';
import {StockInformationService} from '../../core/stock-information.service';

@Component({
    selector: 'app-shell',
    template: require('./app-shell.html'),
    directives: [VolumeComponent],
    providers: [StockInformationService]
})
export class AppShell {
    constructor(private _stockInformationService: StockInformationService) {}

    // In my template, on button click, make api request
    requestData(symbol: string) {
        this._stockInformationService.getData(symbol)
            .subscribe(
                data => {
                    console.log(data)
                },
                error => console.log("Error: " + error)
            )}
    }

}

在我的控制台中,requestData错误: Error: [object Object]

第3287篇《Angular 2应用程序中没有“ Access-Control-Allow-Origin”标头》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
Mandy村村 2020.03.24

大多数情况下,这种情况是由于服务器的响应类型无效而发生的。

请确保以下2避免此问题。

  1. 您无需在Angular端设置任何CORS标头。非常知道该如何处理。Angular期望返回数据为json格式。因此,即使对于OPTIONS请求,也要确保返回类型为JSON。
  2. 您可以使用CORS标头在服务器端处理CORS,这很容易解释,也可以在Google中设置CORS标头或中间件。
猴子 2020.03.24

通过将以下内容添加到您的spring控制器中,我遇到了相同的错误,以及如何解决该错误:

@CrossOrigin(origins = {"http://localhost:3000"})
小胖古一 2020.03.24

我在练习Angular5时遇到了同样的问题。然后我遇到了https://spring.io/guides/gs/rest-service-cors/,这帮助我解决了问题。

我一直@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")使用我的请求映射方法。我们也可以在Spring Boot应用程序中全局配置它。

AStafan 2020.03.24

如果您正在使用SoapUI创建一个用于REST和SOAP请求和响应的免费测试工具的模型,那么对于Angular 2+应用程序,您应该记住在HTTP标头请求中进行设置

 Access-Control-Allow-Origin :  *

我添加了两个图像,以帮助您插入。第一个显示您应添加的标题。如果要添加标题,则必须先单击加号按钮(绿色)。

第一张图片

第二张图片显示插入*。值*允许接受来自不同主机的所有请求。

第二张图片

完成这项工作后,我的Angular应用程序在控制台中消除了此烦人的错误。

控制台内部错误

该视频是帮助我了解创建第一个模型的重要资源它将帮助您在SoapUi的环境中创建新的模型,而无需服务器端。

伽罗 2020.03.24

不幸的是,这不是Angular2错误,而是浏览器正在运行的错误(即,应用程序外部)。

必须先将CORS标头添加到服务器上的该端点,然后才能发出任何请求。

猴子 2020.03.24

我花了很多时间来寻找解决方案,并通过在服务器端进行更改使它最终得以工作。请访问以下网站https://docs.microsoft.com/zh-cn/aspnet/core/security/cors

当我在服务器端启用corse时,它对我有用。我们在API中使用Asp.Net核心,下面的代码可以正常工作

1)在Startup.cs的ConfigureServices中添加了Addcors

public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        services.AddMvc();
    }

2)在Configure方法中添加了UseCors,如下所示:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(builder =>builder.AllowAnyOrigin());
        app.UseMvc();
    }
老丝神无 2020.03.24

只需将php文件设置

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
Stafan 2020.03.24

使用http://www.mocky.io/时我也遇到了同样的问题,我要做的是添加到模拟响应头中:Access-Control-Allow-Origin *

要添加它,只需单击高级选项

Mock.io标头示例 完成此操作后,我的应用程序便能够从外部域检索数据。

樱小胖Mandy 2020.03.24

您可以从以下网站阅读有关此内容的更多信息:http : //www.html5rocks.com/en/tutorials/cors/

您的资源方法不会被命中,因此它们的标题将永远不会被设置。原因是实际请求之前有一个所谓的预检请求,这是一个OPTIONS请求。因此,错误来自以下事实:预检请求未生成必要的标头。检查您是否需要在.htaccess文件中添加以下内容:

Header set Access-Control-Allow-Origin "*"

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android