FujitsuのK5プラットフォームにおけるCross-Origin-Resource-Sharing (CORS)

2017-03-24

Machine-translated — the English original is authoritative.

プロダクション環境（例えば https://allthingscloud.eu のように単一ドメイン内にいる場合）から、ローカルの「デスクトップ」環境（http://localhost からのリクエストを行う場合）へとフロントエンドアプリの開発を移行した開発者であれば、このエラーに慣れ親しんでいるはずです。

これは、クロスサイトスクリプティング（XSS）などの悪意のある攻撃を防ぐために、ほぼすべての現代的なウェブブラウザに組み込まれているセキュリティメカニズムです。

異なるドメイン間で作業する正当なニーズがある場合、この課題に対処する方法は2つあります。

ターゲットサーバーでCORSサポートを有効にする – 対象のウェブサーバーを所有している、またはアクセス権を持っている場合、いくつかの基本的なHEADERを設定することで、ウェブサーバー上でCORSを有効にすることができます。ヘッダーの要件をカバーした素晴らしいブログこちらがありますので、クライアントヘッダーとサーバーヘッダーを混同しないようにしてください。そうしないと、長いデバッグの夜を過ごすことになります！ただし、ターゲットサーバーがCORSをサポートしていない場合、または変更を行う権限がない場合は、以下のような別の回避策が必要です。
CORSプロキシサーバー – これは、ウェブブラウザのリクエストをリッスンし、ブラウザではなくサーバーとして同じリクエストを中継するだけのシンプルなサーバーです。これにより、CORSの課題を完全に回避できます。これは「中間者」アプローチですが、悪意ではなく善意で行うものです 🙂

FujitsuのK5 APIエンドポイントは現在CORSをサポートしていないため、最近の開発課題において私はCORSプロキシを選択しました。これは听起来よりもはるかに簡単で、特にNodeJSでの作業が好きであればなおさらです。CORSプロキシサーバーを実装するために、わずか1〜2行のコードだけで済むNPMモジュールが多数利用可能です。例えば、corsproxy や corsproxy-https などがあります。しかし、いくつかのテストを経て、私は cors-anywhere モジュールを採用しました。このモジュールは、HTTPレスポンスボディとレスポンスヘッダーの両方を転送するからです…すべてのプロキシがこれをやるわけではありません。

シンプルなプロキシサーバーは以下のようになります。

このファイルには、以下に表示されている内容とは異なる方法で解釈またはコンパイルされる可能性のある、隠された双方向のUnicode文字が含まれています。確認するには、隠されたUnicode文字を表示するエディタでファイルを開いてください。
双方向のUnicode文字について詳しく見る

隠し文字を表示


	// Herokuは環境変数PORTを定義し、バインドアドレスを0.0.0.0にすることを要求します
	var host = process.env.PORT ? '0.0.0.0' : '127.0.0.1';
	var port = process.env.PORT

	var cors_proxy = require('cors-anywhere');
	cors_proxy.createServer({
	originWhitelist: [], // すべてのオリジンを許可
	//requireHeader: ['origin', 'x-subject-token'],
	}).listen(port, host, function() {
	console.log('Running CORS Anywhere on ' + host + ':' + port);
	});

rawファイルを表示
 cors_proxy_service.js
❤️でホストされています GitHub

これを使用したAngular 2アプリケーションはここからダウンロードできます – https://github.com/allthingsclowd/K5_Angular_2_Example_Login

Happy Stacking!

withk5youcan

Originally published on allthingscloud.eu (2017-03-24).