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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

2回答

5894閲覧

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

takets

総合スコア43

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2017/10/20 21:12

編集2017/10/21 04:27

###前提・実現したいこと
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.

###該当のソースコード

typescript

1import { Component, OnInit } from '@angular/core'; 2import { Md5 } from "ts-md5/dist/md5"; 3import { HttpClient } from '@angular/common/http'; 4 5@Component({ 6 selector: 'app-root', 7 templateUrl: './app.component.html', 8 styleUrls: ['./app.component.css'], 9}) 10export class AppComponent implements OnInit { 11 title = 'app'; 12 url = 'http://www.rememberthemilk.com/services/rest/?' 13 api_key = 'xxxxxx' 14 shared_secret = 'zzzzzz' 15 16 constructor(private http: HttpClient) {} 17 18 ngOnInit() { 19 console.log(this.shared_secret + 'api_key' + this.api_key + 'formatjsonmethodrtm.auth.getFrob'); 20 let api_sig = Md5.hashStr(this.shared_secret + 'api_key' + this.api_key + 'formatjsonmethodrtm.auth.getFrob'); 21 let api_url = this.url + 'api_key=' + this.api_key + '&format=json&method=rtm.auth.getFrob&api_sig=' + api_sig; 22 console.log(api_url); 23 24 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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2017/10/20 22:31

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

2017/10/21 04:34

ヘッダを追加しました。
guest

回答2

0

ベストアンサー

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

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

投稿2017/10/21 05:40

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takets

2017/10/21 06:40

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

0

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

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

投稿2017/10/21 01:39

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takets

2017/10/21 04:34

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問