ajax通信のクロスオリジン制約について

javascript初心者です。
jQueryのAjax通信で外部のAPIを呼び出しています。

開発機（ローカル）においたファイルで実行しているので下記のようなエラーが出ました。

Access to XMLHttpRequest at 'https://xxxxx.php' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

調べたところクロスオリジンの問題という事がわかり、いくつか解決策をみつけたのですが、
外部のAPIのためサーバー側は変更できず、クライアント側の解決もイマイチ理解できておりません。

基本的な質問ですが、ひとつわからないことがあります。
今回呼び出しているAPIが置かれているサーバーに、別のAPIもあり、
それは別のhtmlファイルのFormで呼び出せています。

html
1<FORM id='POST_FORM' NAME='POST_FORM' METHOD="POST" ACTION='https://xxxxx.php'>
2

クロスオリジンの制約がかかるのはajax通信を使うからで、他の方法であれば制約はかからないものなのでしょうか？

また、今回はGETのAPIをつかってxmlレスポンスを取得したかったのでajax通信を初めて使ったのですが、
上記のような方法でajaxを使わずにもっと簡単に実現できる方法があれば教えていただきたいです。

javascriptのコードは下記に記載します。

javascript
1    $.ajax({
2      url:'https://xxxxxxx.php',
3      type:'GET',
4      dataType:'xml',
5      data:{
6        id:'xxxxxxxxxxx',
7        number:100
8      }
9    })
10    .done(function( data ) {
11        // ...
12        console.log(data);
13    })
14    .fail(function( jqXHR, textStatus, errorThrown ) {
15            // ...
16            console.log(textStatus);
17    });
18

行動規範の内容に同意します

回答2件

クロスオリジンの制約がかかるのはajax通信を使うからで、他の方法であれば制約はかからないものなのでしょうか？

そうですよ

もっと簡単に実現できる方法

そもそもAPIがクロスオリジンに対応すればいい話で、そうしていないということは
外部からのアクセスを禁止しているということ。
つまり、それを回避することは先方の利用規定をやぶることになりかねません。
APIが提供してくれればjsonpで提供してくれれば外部からのアクセスに対応できますが
結局それもAPI側次第です。

別途ご自身の管理するサーバーをキックして処理する方法がないことはないと思いますが
ちょっとハードル高そうなのでおすすめできません。

投稿2019/09/09 03:08

yambejp

総合スコア114814

nikkori

2019/09/09 04:22

ありがとうございます。クロスオリジンの問題が生じるのは開発環境のみなので、今回はブラウザの設定で回避するだけにしました。 APIはセキュリティレベルを高めにしているらしいので（別チームのサーバーエンジニアが開発しています）変えるのは難しそうでした。根本的な理解が足りないので、よく読んで理解してみます！