The Movie Database サポート

Hello all, trying to get some practice with this API and am currently working on caching the image url data as suggested on this page.

I'm trying to make a Cordova Android app, so I'm using Javascript to request the information. However, in my development environment (which is localhost for the domain) I'm getting the error:

Failed to load https://api.themoviedb.org/3/configuration?api_key=MYAPIKEY The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I'm using the code that is suggested on that page under the Javascript - XMLHttpRequest section which is:

var data = "{}";

var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === this.DONE) {
        console.log(this.responseText);
      }
    });

    xhr.open("GET", "https://api.themoviedb.org/3/configuration?api_key=MYAPIKEY");

    xhr.send(data);

Due to the nature of the error and it specifically mentioning the "withCredentials", I simply removed the third line in the above code (xhr.withCredentials=true;) and ran the program again, it was successful.

I then restored the withCredentials line and tried to change my htaccess file:

Before

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Attempt 1

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://api.themoviedb.org/3/configuration?api_key=MYAPIKEY"
</IfModule>

Attempt 2

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://localhost"
</IfModule>

Both of the attempts resulted in the same error as above. In addition to these attempts I tried to use CORS rather than the standard XML request and it had the same error.

After looking through this forum for related issues, I saw that I should be using JSONP rather than the default configuration, however, I'm a little confused as to why the withCredentials is in the example code yet it doesn't seem to be required, so I have a few questions...

Related threads I read through: Thread 1 Thread 2

Questions

  1. Is there any problem with taking out that withCredentials line and simply moving forward with API calls? (any security concerns maybe?)

  2. Will using withCredentials on a different domain than localhost work? (is localhost simply limited?)

  3. Any specific suggestions for this particular situation going forward?

Thanks in advance, I know that this is long winded, but I didn't want to leave out any details since I've been Googling for a while and seen a lot of the same "fixes" around.

Edit: Layout for easier reading

3 replies (on page 1 of 1)

Jump to last post

Hi @matt.lawrence,

I am no help with anything related to Cordova or Android, but often is the case when it comes to CORS issues, it's because you need to use JSONP.

Have you tried that?

I was able to get the API configuration successfully pulled using JSONP so I think that I should be good going forward. Thank you for the assistance.

Out of technical curiosity, in what circumstance would Javascript be used, using the withCredentials set to true? Wouldn't all requests (other than internal ones from your own website, I assume) come from other domains and come up with the cross domain issue?

Hey Matt,

I was able to get the API configuration successfully pulled using JSONP so I think that I should be good going forward. Thank you for the assistance.

Perfect thumbsup_tone2

Out of technical curiosity, in what circumstance would Javascript be used, using the withCredentials set to true?

I'm not sure what withCredentials is for or does so I don't think I can be much help with that question.

映画やテレビ番組が見つかりませんか?ログインして作成してください。

全般

s 検索バーに移動する
p プロファイルメニューを開く
esc 開いているウィンドウを閉じる
? キーボードショートカットウィンドウを開く

メディアのページ

b 戻る(または該当する場合は親に)
e 編集ページに行く

テレビ番組のシーズンのページ

(右矢印)次のシーズンに行く
(左矢印)前のシーズンに戻る

テレビ番組のエピソードのページ

(右矢印)次のエピソードに進む
(左矢印)前のエピソードに戻る

全ての画像のページ

a 画像追加ウィンドウを開く

全ての編集ページ

t 翻訳選択を開く
ctrl+ s フォームを送信する

ディスカッションのページ

n 新しいディスカッションを作成する
w 監視ステータスを切り替える
p 公開/非公開を切り替える
c 閉じる/開くを切り替える
a アクティビティを開く
r ディスカッションに返信
l 最後の返事に行く
ctrl+ enter メッセージを送信する
(右矢印)次のページ
(左矢印)前のページ

設定

このアイテムを評価したり、リストに追加したりしたいですか?

ログイン

メンバーではありませんか?

登録してコミュニティに参加