クロスオリジンリクエストはHTTPでのみサポートされていますが、クロスドメインではありません

私はこのコードを使用してAJAXリクエストを作成しています：

$("#userBarSignup").click(function(){
    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",
        {/*params*/},
        function(response){
            $("#signup").html("TEST");
            $("#signup").html(response);
        },
        "html");

しかし、Google Chrome JavaScriptコンソールから、次のエラーが発生し続けます。

XMLHttpRequestはfile：/// C：/xampp/htdocs/webname/resources/templates/signup.phpを読み込めません。クロスオリジンリクエストはHTTPでのみサポートされます。

問題は、signup.phpファイルがすべてのWebサイトの実行元であるローカルWebサーバーでホストされているため、クロスドメインではないことです。

どうすればこの問題を解決できますか？

実際にWebサーバーを実行し、ファイルに対してget要求を行うのではなく、そのサーバー上のURIに対してget要求を行う必要があります。例：行を変更します。

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

次のようなものを読むには：

    $.get("http://localhost/resources/templates/signup.php",

また、最初のリクエストページもhttp経由で作成する必要があります。

私は次のスイッチでクロームを始めることができました：

--allow-file-access-from-files

os x try（コピーして貼り付ける場合はダッシュを再入力）：

open -a 'Google Chrome' --args -allow-file-access-from-files

他の* nix実行時（テストされていません）

 google-chrome  --allow-file-access-from-files

またはWindowsで、Chromeショートカットのプロパティを編集し、スイッチを追加します。

 C:\ ... \Application\chrome.exe --allow-file-access-from-files

「ターゲット」パスの最後まで

小さなフロントエンドプロジェクトで作業していて、ローカルでテストしたい場合は、通常、ウェブブラウザでローカルディレクトリをポイントして開きます。たとえば、file：/// home / erick / mysuperproject / indexと入力します。 URLバーの.html。ただし、サイトがリソースを読み込もうとしている場合、リソースがローカルディレクトリに配置されていても、次のような警告が表示される場合があります。

XMLHttpRequestはfile：///home/erick/mysuperproject/mylibrary.jsを読み込めません。クロスオリジンリクエストはHTTPでのみサポートされます。

Chromeやその他の最新のブラウザでは、クロスオリジンリクエストのセキュリティ制限が実装されています。つまり、file：///を介して何もロードできないため、ローカルでも同じオリジンポリシーにより、常にhttp：//プロトコルを使用する必要があります。そのように単純なことですが、そこでプロジェクトを実行するにはWebサーバーをマウントする必要があります。

これは世界の終わりではなく、古き良きApache（他のいくつかのプロジェクトを実行している場合はVirtualHostsを使用）、Expressを使用したnode.js、Rubyサーバーなど、または単に変更するなど、多くのソリューションがあります。ブラウザの設定。

ただし、怠惰なものには、よりシンプルで軽量なソリューションがあります。PythonのSimpleHTTPServerを使用できます。すでにPythonにバンドルされているので、何もインストールしたり構成したりする必要はありません。

たとえば、プロジェクトディレクトリにCDを挿入します。

1 cd / home / erick / mysuperprojectを使用して、

1 python -m SimpleHTTPServerこれで、ターミナルにこのメッセージが表示されます。

1 0.0.0.0ポート8000​​でHTTPを提供しています...これで、ブラウザに戻って、そこで提供されhttp://0.0.0.0:8000ているすべてのディレクトリファイルにアクセスできます。ポートなどを構成できます。ドキュメントを参照してください。しかし、私が新しいライブラリをテストしたり、新しいアイデアを考え出したりするために急いでいるとき、この単純なトリックは私にとってはうまくいきます。

さあ、ハッピーコーディング！

編集： Python 3以降では、SimpleHTTPServerはhttp.serverに置き換えられました。したがって、たとえばPython 3.3では、次のコマンドは同等です。

python -m http.server 8000

JSONデータを使用してページにデータを入力する単純なHTMLファイルを読み込もうとしたときに同じエラーが発生したため、node.jsとexpressを使用して問題を解決しました。ノードがインストールされていない場合は、最初にノードをインストールする必要があります。

1. Expressをインストールする npm install express

2. プロジェクトのルートフォルダーにserver.jsファイルを作成します。私の場合は、サーバーにしたいファイルの1つ上のフォルダーです。

3. 次のようなものをserver.jsファイルに入れて、エクスプレスgihubサイトでこれについて読んでください。

   var express = require('express');
   var app = express();
   var path = require('path');
   
   // __dirname will use the current path from where you run this file 
   app.use(express.static(__dirname));
   app.use(express.static(path.join(__dirname, '/FOLDERTOHTMLFILESTOSERVER')));
   
   app.listen(8000);
   console.log('Listening on port 8000');
   

4. server.jsを保存したら、次を使用してサーバーを実行できます。

node server.js

5. に移動するhttp://localhost:8000/FILENAMEと、ロードしようとしていたHTMLファイルが表示されます。

nodejsがインストールされている場合は、コマンドラインを使用してサーバーをダウンロードしてインストールできます。

npm install -g http-server

ディレクトリを、ファイルを提供するディレクトリに変更します。

$ cd ~/projects/angular/current_project 

サーバーを実行します。

$ http-server 

これにより、「http-serverを起動しています」というメッセージが表示されます。

利用可能： http：// your_ip：8080および http://127.0.0.1:8080

それはあなたがあなたのブラウザで次のようなURLを使用することを可能にします

http：// your_ip：8080 / index.html

この方法で最適に機能します。両方のファイルがサーバー上にあることを確認してください。htmlページを呼び出すときは、次のようなWebアドレスを使用してください。http:://localhost/myhtmlfile.htmlではなく、C::///users/myhtmlfile.html。jsonに渡されるURLが以下に示すWebアドレスであることも確認してください。

$(function(){
                $('#typeahead').typeahead({
                    source: function(query, process){
                        $.ajax({
                            url: 'http://localhost:2222/bootstrap/source.php',
                            type: 'POST',
                            data: 'query=' +query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                process(data);
                            }
                        });
                    }
                });
            });

REM kill all existing instance of chrome 
taskkill /F /IM chrome.exe /T
REM directory path where chrome.exe is located
set chromeLocation="C:\Program Files (x86)\Google\Chrome\Application"
cd %chromeLocation%
cd c:
start chrome.exe --allow-file-access-from-files

1. chromeLocationパスを自分のものに変更します。

2. 上記を.batファイルとして保存します。

3. 作成したバッチファイルにファイルをドラッグアンドドロップします。（Chromeにはページの復元オプションがありますが、ページを開いている場合は、復元を押すだけで機能します）。

phpインタープリターを使用してPythonなしでサーバーを起動することもできます。

例えば：

cd /your/path/to/website/root
php -S localhost:8000

これは、phpユーティリティが一部のOS（Macを含む）にプリインストールされているため、npmの代替が必要な場合に役立ちます。

すべてのPythonユーザーの場合：

ターミナルの宛先フォルダに移動するだけです。

cd projectFoder

次に、HTTPサーバーを起動します。Python3+の場合：

python -m http.server 8000

::ポート8000​​（http：// [::]：8000 /）でHTTPを提供しています..。

リンクに移動します：http：//0.0.0.0：8000 /

楽しい ：）