web-dev-qa-db-ja.com

Angular 2アプリに「Access-Control-Allow-Origin」ヘッダーはありません

このプロジェクトでは、Angular 2を学習および実践しています。サーバー側がなく、 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]

angularwebpackheadercors
43
philip yoo

これは、サーバー上の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();
});

そのコードは、非常によく似た質問に対する @ jvandemoの回答 でした。

37
Pablo Ezequiel

詳細については、こちらから参照できます： http://www.html5rocks.com/en/tutorials/cors/ 。

リソースメソッドはヒットしないため、ヘッダーは設定されません。その理由は、実際のリクエスト（OPTIONSリクエスト）の前にプリフライトリクエストと呼ばれるものがあるからです。そのため、プリフライトリクエストが必要なヘッダーを生成しないという事実からエラーが発生します。 .htaccessファイルに次を追加する必要があることを確認してください。

Header set Access-Control-Allow-Origin "*"
16
Nitheesh K P

http://www.mocky.io/ を使用しているときにも同じ問題が発生しました。mock.io応答ヘッダーにAccess-Control-Allow-Origin *を追加しました。

そこに追加するには、詳細オプションをクリックするだけです

Mock.io Header Example これが完了すると、アプリケーションは外部ドメインからデータを取得できました。

6
Abner

phpファイルで次のように設定できます。

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

解決に多くの時間を費やし、サーバー側で変更を加えることでようやく機能するようになりました。Webサイトを確認してください https://docs.Microsoft.com/en-us/aspnet/core/security/cors

サーバー側でcorseを有効にしたとき、私にとってはうまくいきました。Asp.NetコアをAPIで使用し、以下のコードが働きました

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();
    }
4
satish

私も同じ問題に遭遇し、次の方法でこの問題を解決しました。

ステップ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
Jun

残念ながら、それはAngular2エラーではなく、ブラウザで実行されているエラーです（つまり、アプリの外部）。

任意のリクエストを行う前に、そのCORSヘッダーをサーバー上のそのエンドポイントに追加する必要があります。

4
drewwyatt

SoapUI 、RESTおよびSOAPの無料テストツール、およびAngularのモックアップを作成する場合httpヘッダーリクエスト内で設定する必要がある2+アプリケーション

 Access-Control-Allow-Origin :  *

挿入に役立つ2つの画像を追加します。最初は、追加する必要のあるヘッダーを示しています。プラスボタン（緑色）をクリックする前にヘッダーを追加する場合。

First image

2番目の画像は、*の挿入を示しています。値*は、異なるホストからのすべての要求を受け入れることを許可します。

Second image

この作業の後、私のAngularアプリケーションは、この厄介なエラーをコンソールから削除しました。

error inside console

最初のモックアップを作成することを理解するのに役立った大きな助けは このビデオ です。サーバーサイドなしでSoapUiの環境内に新しいモックアップを作成するのに役立ちます。

1
Luca Basilico

私はAngular5を練習していたときに同じ問題を抱えていました。それから https://spring.io/guides/gs/rest-service-cors/ に出会い、問題の解決に役立てました。

リクエストマッピングメソッドで@CrossOrigin(exposedHeaders="Access-Control-Allow-Origin")を保持しました。また、これをスプリングブートアプリケーションでグローバルに構成することもできます。

1
Sudheer Kumar

何もインストールせずに別の簡単な方法

  1. 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
  }
  );
 }

  2. Proxy.conf.jsonファイルを作成します

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

  3. 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 その他のオプションについて

0
Sibiraj

私は同じエラーを受け取りましたが、ここではあなたのスプリングコントローラーに以下を追加することでそれを解決しました：

@CrossOrigin(origins = {"http://localhost:3000"})
0
Moh-Othmanovic