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

【问题标题】：No 'Access-Control-Allow-Origin' header in Angular 2 appAngular 2 应用程序中没有“Access-Control-Allow-Origin”标头
【发布时间】：2016-06-30 08:58:42
【问题描述】：

对于这个项目，我只是在学习和练习 Angular 2。我没有服务器端并且正在向 API 请求 barchart ondemand 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.

库存信息服务：

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]

【问题讨论】：

您能添加您使用的服务器吗？这不是 angular2 错误，而是服务器的 CORS 配置有问题，如果您说您使用的是什么服务器（apache、node+express 等），您可以获得更具体的响应。我可以用 node+express 的服务器解决这个错误
这个答案可能有用：stackoverflow.com/a/58064366/7059557
这听起来可能很奇怪，但我不必在服务器端进行任何更改。 angular ui 项目有两个分支，一个正在处理另一个它不是。我还没有找到确凿的答案。

标签： angular webpack header cors

【解决方案1】：

很遗憾，这不是 Angular2 错误，而是您的浏览器遇到的错误（即在您的应用程序之外）。

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

【讨论】：

关于如何做到这一点的任何想法？
错了，不能在服务端添加，你只需要修改你的请求，添加正确的headers即可。您无法访问您向其发出请求的每台服务器。这是误导。

【解决方案2】：

您可以从这里了解更多信息：http://www.html5rocks.com/en/tutorials/cors/。

您的资源方法不会受到影响，因此它们的标头永远不会被设置。原因是在实际请求之前存在所谓的预检请求，即 OPTIONS 请求。所以错误来自预检请求没有产生必要的标头这一事实。检查您是否需要在 .htaccess 文件中添加以下内容：

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

【讨论】：

这个解决方案不是很糟糕吗，因为您允许所有域控制您的后端。如果有人连接到您的服务器并在其上运行 localhost 怎么办？他将能够从您的后端获取所有数据。还是我错了，这是解决此问题的安全且最佳实践方式？

【解决方案3】：

我也遇到了同样的问题，通过以下方式解决了这个问题。

第 1 步：

$ npm install --save-dev http-proxy-middleware

第 2 步：

当我获取 web api 时添加一个代理，如果你使用 lite-server，你可以添加一个文件 bs-config.js。

//file: bs-config.js
var proxyMiddleware = require('http-proxy-middleware');

module.exports = {
    server: {
        middleware: {
            1: proxyMiddleware('/example-api', {
                target: 'http://api.example.com',
                changeOrigin: true,
                pathRewrite: {
                '^/news-at-api': '/api'
                }
            })
        }
    }
};

希望这会有所帮助。

【讨论】：

【解决方案4】：

我在使用http://www.mocky.io/ 时也遇到了同样的问题，我所做的是在 mock.io 响应头中添加：Access-Control-Allow-Origin *

要添加它，只需点击高级选项

完成此操作后，我的应用程序就能够从外部域检索数据。

【讨论】：

【解决方案5】：

这是服务器上 CORS 配置的问题。不清楚你用的是什么服务器，但是如果你用的是Node+express你可以用下面的代码解决

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

该代码是一个非常相似的问题的answer of @jvandemo。

【讨论】：

如何在 Spring Boot @Ezequiel 中执行此操作？
嗨@LahiruGamage，@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin") 为我工作了请求映射方法。
基本上这对我有帮助：res.header("Access-Control-Allow-Origin", "<Website-URL>");

【解决方案6】：

另一种简单的方法，无需安装任何东西

HTTP 函数

authenticate(credentials) {

let body = new URLSearchParams();
body.set('username', credentials.username);
body.set('password', credentials.password);

return this.http.post(/rest/myEndpoint, body)
  .subscribe(
  data => this.loginResult = data,
  error => {
    console.log(error);
  },
  () => {
  // function to execute after successfull api call
  }
  );
 }

创建 proxy.conf.json 文件

{
 "/rest": {
"target": "http://endpoint.com:8080/package/",
"pathRewrite": {
  "^/rest": ""
},
"secure": false
}
}

然后ng serve --proxy-config proxy.conf.json（或）打开 package.json 并替换
```
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json",
 },
```

然后npm start

就是这样。

点击此处https://webpack.github.io/docs/webpack-dev-server.html 了解更多选项

【讨论】：

【解决方案7】：

如果您使用 SoapUI 创建模型，这是一个免费的 REST 和 SOAP 请求和响应测试工具，对于 Angular 2+ 应用程序，您应该记住在您的 http 标头请求中设置

 Access-Control-Allow-Origin :  *

我添加了两张图片来帮助您插入。第一个显示您应该添加的标题。如果你想在必须点击加号按钮之前添加标题（它是绿色的）。

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

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

this video 是帮助我理解创建我的第一个模型的一个重要途径。它将帮助您在没有服务器端的 SoapUi 环境中创建新的模型。

【讨论】：

【解决方案8】：

只需在php文件中设置为

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

【讨论】：

【解决方案9】：

我遇到了同样的错误，在这里我通过将以下内容添加到您的 spring 控制器来解决它：

@CrossOrigin(origins = {"http://localhost:3000"})

【讨论】：

【解决方案10】：

我花了很多时间解决问题，最终通过在服务器端进行更改来解决问题。查看网站https://docs.microsoft.com/en-us/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();
    }

【讨论】：

谢谢，很有帮助！
我推荐 this answer 获取我的 asp.net Web API 以解决 no-access-control-allow-origin 问题。

【解决方案11】：

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

我在请求映射方法中保留了@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")。我们也可以在 spring boot 应用中全局配置。

【讨论】：

【解决方案12】：

大多数情况下，这是由于服务器的响应类型无效。

请确保以下 2 项以避免此问题..

您不需要在 Angular 端设置任何 CORS 标头。它非常清楚如何处理它。 Angular 期望返回数据为 json 格式。所以即使对于 OPTIONS 请求，也要确保返回类型是 JSON。
您可以使用 CORS 标头在服务器端处理 CORS，这非常不言自明，或者您可以 google 如何设置 CORS 标头或中间件。

【讨论】：

【解决方案13】：

这是服务器配置，设置 config.addAllowedHeader("*");在 CorsConfiguration 中。

【讨论】：