Question

对于这个项目，我只是学习和练习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.

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]

Answer 1

服务器上的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。

Answer 2

您可以从此处了解更多相关信息：http://www.html5rocks.com/en/tutorials/cors/。

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

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

Answer 3

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

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

即可

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

Answer 4

只需将php文件设置为

即可

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

Answer 5

不幸的是，这不是Angular2错误，这是您的浏览器遇到的错误（即在您的应用之外）。

在您发出任何请求之前，必须将CORS标头添加到服务器上的该端点。

Answer 6

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

第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'
                }
            })
        }
    }
};

希望这会有所帮助。

Answer 7

我花了很多时间来解决问题并最终通过在服务器端进行更改来实现它。检查网站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();
    }

Answer 8

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

 SELECT p._id, p.time, p1.first_name, p2.first_name
 FROM play p
 JOIN score s1
   ON p._id = s1.play_id
 JOIN score s2
   ON p._id = s2.play_id
  AND s1.player_id < s2.player_id
 JOIN player p1
   ON s1.player_id = p1._id
 JOIN player p2
   ON s2.player_id = p2._id

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

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

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

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

Answer 9

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

我已将@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")保留在我的请求映射方法上。我们还可以在spring boot应用程序中全局配置它。

Answer 10

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

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了解更多选项

Answer 11

我得到了同样的错误，在这里我是如何通过在弹簧控制器中添加以下内容来解决的：

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

Answer 12

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

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

您不需要在Angular端设置任何CORS标头。非常了解如何处理它。 Angular期望返回数据为json格式。因此，即使对于OPTIONS请求，也要确保返回类型为JSON。
您可以通过使用CORS标头来处理服务器端的CORS，这很容易解释，也可以通过Google搜索如何设置CORS标头或中间件。

No＆＃39; Access-Control-Allow-Origin＆＃39; Angular 2 app中的标题

12 个答案: