現在Angualrのアプリケーションを作っています。その中で、GithubのOAuth認証を行う動作があり、POSTを行う箇所があります。
参考にしているページ:
https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/
取り合えずPOST動作をHTMLのformで実装しました。
HTML
1<form action="{{this.apiService.OAuthURL2}}" method="post"> 2 <div> 3 <label for="client_id">client_id</label> 4 <input name="client_id" id="client_id" value="{{this.apiService.clientId}}"> 5 </div> 6 <div> 7 <label for="client_secret">client_secret</label> 8 <input name="client_secret" id="client_secret" value="{{this.apiService.clientSecret}}"> 9 </div> 10 <div> 11 <label for="code">code</label> 12 <input name="code" id="code" value="{{this.apiService.redirect_code}}"> 13 </div> 14 <div> 15 <label for="redirect_url">redirect_url</label> 16 <input name="redirect_url" id="redirect_url" value="{{this.apiService.redirectUrl}}"> 17 </div> 18 <div> 19 <label for="state">state</label> 20 <input name="state" id="state" value="{{this.apiService.state}}"> 21 </div> 22 <div> 23 <button>アクセストークンを取得</button> 24 </div> 25</form>
この場合、ボタンを押すと、access_tokenというファイルのダウンロードが始まり、その中にアクセストークンがありました。
HTMLのformでアクセストークンの取得に成功したため、scriptのほうで取得する処理を実装しました。
Angular
1 OAuth2() { 2 var httpObj = this.http.post( 3 this.OAuthURL2, 4 new HttpParams() 5 .set('client_id', this.clientId) 6 .set('client_secret', this.clientSecret) 7 .set('code', this.redirect_code)// default is empty 8 .set('redirect_url', "http://localhost:4200") 9 .set('state', this.state), // default is true 10 { 11 headers: new HttpHeaders({ 12 'Content-Type': 'application/x-www-form-urlencoded' 13 }) 14 } 15 ); 16 httpObj.subscribe(this.OAuth2Next, this.RequestError); 17 }
ことのきブラウザ側のエラーでは、下記のように表示されてしまいます。
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できないのでしょうか
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/12 13:51