scriptからのPOSTがCORSにひっかかる。HTMLのfromからのPOSTはできるのに...

Question

現在Angualrのアプリケーションを作っています。その中で、GithubのOAuth認証を行う動作があり、POSTを行う箇所があります。
参考にしているページ:
https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/

取り合えずPOST動作をHTMLのformで実装しました。

<form action="{{this.apiService.OAuthURL2}}" method="post">
  <div>
    <label for="client_id">client_id</label>
    <input name="client_id" id="client_id" value="{{this.apiService.clientId}}">
  </div>
  <div>
    <label for="client_secret">client_secret</label>
    <input name="client_secret" id="client_secret" value="{{this.apiService.clientSecret}}">
  </div>
  <div>
    <label for="code">code</label>
    <input name="code" id="code" value="{{this.apiService.redirect_code}}">
  </div>
  <div>
    <label for="redirect_url">redirect_url</label>
    <input name="redirect_url" id="redirect_url" value="{{this.apiService.redirectUrl}}">
  </div>
  <div>
    <label for="state">state</label>
    <input name="state" id="state" value="{{this.apiService.state}}">
  </div>
  <div>
    <button>アクセストークンを取得</button>
  </div>
</form>

この場合、ボタンを押すと、access_tokenというファイルのダウンロードが始まり、その中にアクセストークンがありました。
HTMLのformでアクセストークンの取得に成功したため、scriptのほうで取得する処理を実装しました。

    OAuth2() {
        var httpObj = this.http.post(
            this.OAuthURL2,
            new HttpParams()
                .set('client_id', this.clientId)
                .set('client_secret', this.clientSecret)
                .set('code', this.redirect_code)// default is empty
                .set('redirect_url', "http://localhost:4200")
                .set('state', this.state), // default is true
            {
                headers: new HttpHeaders({
                    'Content-Type': 'application/x-www-form-urlencoded'
                })
            }
        );
        httpObj.subscribe(this.OAuth2Next, this.RequestError);
    }

ことのきブラウザ側のエラーでは、下記のように表示されてしまいます。

Failed to load https://github.com/login/oauth/access_token:
 No 'Access-Control-Allow-Origin' header is present on the requested resource.
 Origin 'http://localhost:4200' is therefore not allowed access.

HTMLのformもクライアントで、scriptも結局はクライアントからのhttp requestなので変わらないと思うのですが、scriptのほうで実装する場合はエラーになってしまいます。

http requestの中身をchromeのデバッガーから参照して違いを探したところ違ったのは、
HTMLのほうのRequest Headerに、Chahe-Control, Connection, Content-Length, Cookie,Host, Uqgrade-Insecure-Requests　があることぐらいでした。

なぜscriptのほうだけ、
"No 'Access-Control-Allow-Origin' header is present on the requested resource."
とでてきてPOSTできないのでしょうか

Answer 1

HTMLからはどこのURLにでもリンク(href=とか、src=とか、action=とか)できます。
なぜならそれがWWWだから。

CORSについてはご存じのようなので、何故Javascriptで出来ないかは略。

Comments

[Kunoki]

ご回答いただいてありがとうございます。
下記のサイトでおっしゃっている内容の説明を読んで理解しました。
https://qiita.com/nanocloudx/items/f49600b705be9d53a9b5

そうですよね、HTMLのscriptタグ(jqueryのリンクとか)がCORSに引っかかってないですもんね。
ありがとうございます

Answer 2

こんにちは。
恐らくですが、サーバ側のアクセス許可ができていないことが原因ではないでしょうか。自分ではNodejs(Express)しかコンフィグレーションしたことがないので、他サーバの例をお答えできないのですが、ご利用のサーバのCORS許可方法を調べられてはどうでしょうか。

Comments

[Kunoki]

ご回答ありがとうございます。
サーバー側はgithubで信用できるサーバーなので、クライアント側も問題だとおもっています

Answer 3

コード等詳しく見てないのでハズレかもしれませんが、条件の違いで、一方はシンプルなリクエストで良いが、上手くいかない方はプリフライトリクエストが必要ということはないですか？

ハズレだったらすみません。

でも、何にせよ、Fiddler などのキャプチャツールを使って要求・応答ヘッダをキャプチャし、うまくいく場合 / いかない場合の違いを調べてみないことには話が始まらないと思います。

是非 Fiddler を入手してやってみてください。

シンプルなリクエスト/プリフライトリクエストが何か、Fiddler で何を見ることができるのかは、以下の記事が参考になると思います。

クロスドメインの WCF サービス
http://surferonwww.info/BlogEngine/post/2016/12/27/wcf-service-in-cross-domain.aspx

Comments

[Kunoki]

ご回答ありがとうございます。
Fiddlerを使ってもうちょっと調べてみようと思います