Запросы на кросс-начало поддерживаются только для 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 не может загрузить Файл:///C:/xampp/htdocs/webname/resources/templates/signup.php. Пересекать запросы происхождения поддерживаются только для HTTP.

Проблема заключается в том, что файл signup.php размещен на моем локальном веб-сервере, где все веб-сайты запускаются из-за того, что он не является междоменным.

Как я могу решить эту проблему?

Ответ 1

Вам нужно фактически запустить веб-сервер и сделать запрос на получение URI на этом сервере, вместо того, чтобы делать запрос на получение файла; например измените строку:

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

чтобы прочитать что-то вроде:

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

и страница начального запроса также должна быть выполнена над http.

Ответ 2

Мне посчастливилось запустить хром со следующим переключателем:

--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

или на окнах отредактируйте свойства хром-ярлыка и добавьте переключатель, например

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

до конца целевого пути

Ответ 3

Если вы работаете над небольшим интерфейсом проекта и хотите протестировать его локально, вы обычно открываете его, указывая свой локальный каталог в веб-браузере, например, вводя файл:///home/erick/mysuperproject/index. html в вашей строке URL. Однако, если ваш сайт пытается загрузить ресурсы, даже если они размещены в вашем локальном каталоге, вы можете увидеть предупреждения вроде этого:

XMLHttpRequest не может загрузить файл:///home/erick/mysuperproject/mylibrary.js. Запросы на кросс-начало поддерживаются только для HTTP.

В Chrome и других современных браузерах реализованы ограничения безопасности для запросов Cross Origin, что означает, что вы не можете загружать что-либо через файл:///, вам нужно всегда использовать протокол http://, даже локально. -de Same Origin политики. Просто, как это, вам нужно установить веб-сервер для запуска там своего проекта.

Это не конец света, и есть много решений, в том числе старый добрый Apache (с VirtualHosts, если вы выполняете несколько других проектов), node.js с выражением, сервером Ruby и т.д. или просто изменяя настройки вашего браузера.

Однако это более простое и легкое решение для ленивых. Вы можете использовать Pythons SimpleHTTPServer. Он поставляется в комплекте с python, поэтому вам вообще не нужно устанавливать и настраивать что-либо вообще!

Итак, cd в каталог проекта, например

1 cd/home/erick/mysuperproject а затем просто используйте

1 python -m SimpleHTTPServer И вот оно, вы увидите это сообщение в терминале

1 Обслуживание HTTP на сервере 0.0.0.0 8000... Теперь вы можете вернуться в свой браузер и посетить http://0.0.0.0:8000 со всеми файлами каталога, которые там были. Вы можете настроить порт и другие вещи, просто посмотрите документацию. Но этот простой трюк работает для меня, когда Im в спешке, чтобы протестировать новую библиотеку или разработать новую идею.

Там вы идете, счастливое кодирование!

EDIT: В Python 3+, SimpleHTTPServer был заменен на http.server. Так, например, в Python 3.3 следующая команда эквивалентна:

python -m http.server 8000

Ответ 4

Я получал ту же ошибку при попытке загрузить только файлы HTML, которые использовали данные JSON, чтобы заполнить страницу, поэтому я использовал используемые node.js и express для решения проблемы. Если у вас нет node, вам нужно установить node в первую очередь.

Установить экспресс npm install express
Создайте файл server.js в корневой папке вашего проекта, в моем случае одну папку над файлами, которые я хотел сервер

Поместите в файл server.js что-то вроде следующего: express gihub site:

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');

После того, как вы сохранили server.js, вы можете запустить сервер, используя:

node server.js

Перейдите в http://localhost:8000/FILENAME, и вы увидите файл HTML, который вы пытались загрузить.

Ответ 5

Если у вас установлен nodejs, вы можете загрузить и установить сервер с помощью командной строки:

npm install -g http-server

Измените каталоги в каталог, в котором вы хотите обслуживать файлы:

$ cd ~/projects/angular/current_project

Запустите сервер:

$ http-server

который выдает сообщение. Запуск http-сервера, обслуживающий:

Доступно по: http://your_ip:8080 и http://127.0.0.1:8080

Это позволяет использовать URL-адреса в вашем браузере, например

http://your_ip:8080https://stackoverflow.com/index.html

Ответ 6

Он работает лучше всего. Убедитесь, что оба файла находятся на сервере. При вызове html-страницы используйте веб-адрес, например: http:://localhost/myhtmlfile.html, а не, C::///users/myhtmlfile.html. Сделайте также команду, чтобы URL-адрес, переданный json, был веб-адресом, обозначенным ниже:

$(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);
                            }
                        });
                    }
                });
            });

Ответ 7

это мой HTML-код index.html

и ниже моего файла JSON

{

"name" : "komal" ,
"age"  :  "21",
"gender" : "female"

}

enter code here<html>
   <head>
      <title>The jQuery Example</title>
       <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script>

         $(document).ready(function() {

            $("#driver").click(function(event){
               $.getJSON('result.json', function(data) {
                 $('#stage').html('<p> Name: ' + data.name + '</p>');
                  $('#stage').append('<p>Age : ' + data.age+ '</p>');
              $('#stage').append('<p> Gender: ' + data.gender+ '</p>');
           });
        });

     });
  </script>

Нажмите на кнопку, чтобы загрузить файл result.html:

  <div id = "stage" style = "background-color:#cc0;">
     STAGE
  </div>

  <input type = "button" id = "driver" value = "Load Data" />

почему выше код не работает на Chrome??

Ответ 8

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

измените путь chromeLocation со своим.
сохранить выше как файл .bat.
перетащите файл на созданный вами пакетный файл. (Chrome дает страницы восстановления Опция, хотя, если у вас есть открытые страницы, просто нажмите кнопку восстановления, и он будет работать).