###前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー