質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

localhostからAPIを叩いたときのCORSエラーが発生しないようにしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,874

takets

score 37

前提・実現したいこと

angular4でlocalhostから外部サイトのAPI(今回はRemember the milk:https://www.rememberthemilk.com/services/api/authentication.rtm)からgetしようとすると、CORSエラーが発生する。

前提として、CORSエラーはサーバ側で許可しないと外部のAPIを使うことができない仕様ですが、APIを公開しているため方法はあるはずのため、回避方法を知ることができればと思います。

発生している問題・エラーメッセージ

Failed to load https://www.rememberthemilk.com/services/rest/?api_key=xxxxxx&format=json&method=rtm.auth.getFrob&api_sig=yyyyyy:
 Redirect from 'https://www.rememberthemilk.com/services/rest/?api_key=xxxxxx&format=json&method=rtm.auth.getFrob&api_sig=yyyyyy'
 to 'https://api.rememberthemilk.com/services/rest/?api_key=xxxxxx&format=json&method=rtm.auth.getFrob&api_sig=yyyyyy'
 has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

該当のソースコード

import { Component, OnInit } from '@angular/core';
import { Md5 } from "ts-md5/dist/md5";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'app';
  url = 'http://www.rememberthemilk.com/services/rest/?'
  api_key = 'xxxxxx'
  shared_secret = 'zzzzzz'

  constructor(private http: HttpClient) {}

  ngOnInit() {
    console.log(this.shared_secret + 'api_key' + this.api_key + 'formatjsonmethodrtm.auth.getFrob');
    let api_sig = Md5.hashStr(this.shared_secret + 'api_key' + this.api_key + 'formatjsonmethodrtm.auth.getFrob');
    let api_url = this.url + 'api_key=' + this.api_key + '&format=json&method=rtm.auth.getFrob&api_sig=' + api_sig;
    console.log(api_url);

    this.http.get(api_url);

試したこと

生成したURLをブラウザで開く。期待する結果のjsonが表示できたため、URLを生成するところまでは期待する結果となっている。

補足情報(言語/FW/ツール等のバージョンなど)

angular4.3
typescript

 CORSのヘッダ

Request URL:https://api.rememberthemilk.com/services/rest/?api_key=xxxxxx&format=json&method=rtm.auth.getFrob&api_sig=2a99144722455f594f4b3d5c66766322
Request Method:GET
Status Code:200 OK
Remote Address:104.20.17.170:443
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
CF-RAY:3b1171253aa9947b-NRT
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/javascript; charset=utf-8
Date:Sat, 21 Oct 2017 04:23:31 GMT
Server:cloudflare-nginx
Strict-Transport-Security:max-age=15552000; preload
Transfer-Encoding:chunked
X-Content-Type-Options:nosniff

Request Headers
view source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:ja-JP,ja;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Cookie:cfduid=d80483c09a1da9bded3a4006a56a62bc01508557851; utma=12062263.323031339.1503719300.1506144010.1508559037.3; utmb=12062263.8.10.1508559037; utmc=12062263; __utmz=12062263.1503719300.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:api.rememberthemilk.com
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Query String Parameters
view source
view URL encoded
api_key:xxxxxx
format:json
method:rtm.auth.getFrob
api_sig:2a99144722455f594f4b3d5c66766322

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2017/10/21 07:31

    「生成したURLをブラウザで開」いた場合、CORSのヘッダーはどのようになっていますか?(Developer Toolsなどで確認できます)

    キャンセル

  • takets

    2017/10/21 13:34

    ヘッダを追加しました。

    キャンセル

回答 2

checkベストアンサー

+1

上に挙がっていたmichaelday/rtm-jsを確認していましたが、ブラウザ内から通信するときはJSONPで行っているようです。

ヘッダにもCORSを通す設定はありませんし、XHRでCORSの通信には対応していないようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/21 15:40

    ありがとうございます。JSONPを知りませんでした…。
    AngularにもJsonpModuleというそのままのモジュールがあるようで、こちらで試してみます!

    キャンセル

0

https://www.rememberthemilk.com/services/api/kits.rtm
https://github.com/michaelday/rtm-js

検索しただけだと、公式のAPI kitを試してみては如何でしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/21 13:34

    ありがとうございます。試してみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる