Происхождение не разрешено Access-Control-Allow-Origin

313

Я делаю Ajax.request для удаленного PHP-сервера в приложении Sencha Touch 2 (завернутый в PhoneGap).

Ответ от сервера следующий:

XMLHttpRequest не может загрузить http://nqatalog.negroesquisso.pt/login.php. Происхождение http://localhost:8888 не допускается с помощью Access-Control-Allow-Origin.

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

  • 17
    при использовании jQuery установка dataType: 'jsonp', делает dataType: 'jsonp', дело
  • 10
    Кстати, это не ответ от сервера. Чтобы быть точным, эта ошибка выдается на стороне клиента.
Показать ещё 4 комментария
Теги:
xmlhttprequest
cors
cross-domain

22 ответа

362
Лучший ответ

Я написал статью по этой проблеме некоторое время назад, Cross Domain AJAX.

Самый простой способ справиться с этим, если у вас есть контроль над сервером-ответчиком, - это добавить заголовок ответа для:

Access-Control-Allow-Origin: *

Это позволит использовать междоменный Ajax. В PHP вы хотите изменить ответ так:

<?php header('Access-Control-Allow-Origin: *'); ?>

Вы можете просто поместить параметр Header set Access-Control-Allow-Origin * в конфигурацию Apache или файл htaccess. Это просто работает как шарм.

Из комментариев это важная нота: подстановочный знак позволяет любому домену отправлять запросы на ваш хост. Я рекомендую заменить звездочку на определенный домен, на котором будут выполняться скрипты.

  • 4
    Я свяжусь с моим провайдером сервера. Спасибо
  • 7
    Есть ли какие-либо проблемы безопасности с этим? В этом ответе , например, говорится, что «JavaScript ограничен« одной и той же политикой происхождения »по соображениям безопасности. Например, вредоносный скрипт не может связаться с удаленным сервером и отправить конфиденциальные данные с вашего сайта».
Показать ещё 8 комментариев
61

Если вы не управляете сервером, вы можете просто добавить этот аргумент к своей панели запуска Chrome: --disable-web-security.

Обратите внимание, что я бы не использовал это для обычного "веб-серфинга". Для справки см. Это сообщение: Отключить такую ​​же политику происхождения в Chrome.

Вы используете Phonegap для фактического создания приложения и загрузки его на устройство, это не проблема.

  • 0
    Благодарю. Но мое приложение работает на мобильных устройствах, я не могу передать аргументы своей оболочке webview.
  • 0
    Разве вы сначала не тестировали свое приложение в браузере? Как вы отлаживаете?
Показать ещё 8 комментариев
39

Если вы используете Apache, просто добавьте:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

в вашей конфигурации. Это приведет к тому, что все ответы с вашего веб-сервера будут доступны с любого другого сайта в Интернете. Если вы намерены использовать только сервисы на вашем хосте на определенном сервере, вы можете заменить * на URL-адрес исходного сервера:

Header set Access-Control-Allow-Origin: http://my.origin.host
  • 3
    И не забудьте загрузить модуль: a2enmod заголовки
  • 0
    Как загрузить модуль: a2enmod заголовки?
16

Если у вас есть ASP.NET/ASP.NET MVC, вы можете включить этот заголовок через файл Web.config:

<system.webServer>
  ...

    <httpProtocol>
        <customHeaders>
            <!-- Enable Cross Domain AJAX calls -->
            <remove name="Access-Control-Allow-Origin" />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>
  • 2
    .NET MVC Люди, смотрите здесь! На самом деле я собираюсь напечатать решение и указать на этот ответ в своем блоге, чтобы люди могли найти его проще. Нет ничего хуже, чем попытаться преодолеть препятствие .NET / MVC и не найти ничего, кроме решений PHP / jQuery. Спасибо @ Caio-Proiete
  • 1
    Почему это не работает для меня? Я использую Chrome и пытаюсь получить доступ к странице финансов Yahoo с моего локального хоста.
Показать ещё 3 комментария
15

Это был первый вопрос/ответ, который появился для меня при попытке решить ту же проблему, используя ASP.NET MVC в качестве источника мои данные. Я понимаю, что это не решает вопрос PHP, но он достаточно связан с тем, чтобы быть ценным.

Я использую ASP.NET MVC. Блог блога от Грега Бранта работал у меня. В конечном итоге вы создаете атрибут [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")], который вы можете добавить к действиям контроллера.

Например:

public class HttpHeaderAttribute : ActionFilterAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }
    public HttpHeaderAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        filterContext.HttpContext.Response.AppendHeader(Name, Value);
        base.OnResultExecuted(filterContext);
    }
}

И затем используя его с помощью:

[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]
public ActionResult MyVeryAvailableAction(string id)
{
    return Json( "Some public result" );
}
10

Поскольку Matt Mombrea является правильным для серверной части, вы можете столкнуться с другой проблемой, которая является отказом белого списка.

Вам нужно настроить свой phonegap.plist. (Я использую старую версию телефонного разговора)

Для кордовы могут быть некоторые изменения в названии и каталоге. Но шаги должны быть в основном одинаковыми.

Сначала выберите Поддерживаемые файлы > PhoneGap.plist

Изображение 3592

затем в разделе "ExternalHosts"

Добавьте запись со значением, возможно " http://nqatalog.negroesquisso.pt" Я использую * только для целей отладки.

Изображение 3593

  • 0
    Спасибо за ваше время.
9

Если вы используете chromer, используйте этот плагин

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en

7

Я дам вам простое решение для этого. В моем случае у меня нет доступа к серверу. В этом случае вы можете изменить политику безопасности в браузере Google Chrome, чтобы разрешить Access-Control-Allow-Origin. Это очень просто:

  • Создать ярлык браузера Chrome
  • Значок правой кнопки мыши → Свойства → Ярлык → Цель

Простая вставка "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security.

Местоположение может отличаться. Теперь откройте Chrome, нажав на этот ярлык.

  • 1
    отключение веб-безопасности не кажется идеальным решением ...
7

Это может быть полезно для всех, кто нуждается в исключении для версий "www" и "non-www" реферера:

 $referrer = $_SERVER['HTTP_REFERER'];
 $parts = parse_url($referrer);
 $domain = $parts['host'];

 if($domain == 'google.com')
 {
         header('Access-Control-Allow-Origin: http://google.com');
 }
 else if($domain == 'www.google.com')
 {
         header('Access-Control-Allow-Origin: http://www.google.com');
 }
  • 0
    Указал мне правильное направление в устранении ошибки ACAO лазурью. Пока я добавил разрешенное имя хоста googledrive. Используемый URL должен быть googledrive, а не googledrive
7

Я сталкивался с этим несколько раз при работе с различными API. Часто быстрое исправление заключается в том, чтобы добавить "& callback =?" до конца строки. Иногда амперсанд должен быть символьным кодом, а иногда и "?": "? Callback =?" (см. Использование API Forecast.io с jQuery)

6

если вы находитесь в Apache, просто добавьте файл .htaccess в ваш каталог со следующим содержимым:

Header set Access-Control-Allow-Origin: *

Header set Access-Control-Allow-Headers: content-type

Header set Access-Control-Allow-Methods: *
6

Если вы пишете расширение Chrome и получаете эту ошибку, убедитесь, что вы добавили базовый URL-адрес API в свой блок полномочий manifest.json, например:

"permissions": [
    "https://itunes.apple.com/"
]
5

Вы можете заставить его работать без модификации сервера, включив в ответ HTTP OPTIONS broswer, включая заголовок Access-Control-Allow-Origin: *.

В Chrome используйте это расширение. Если вы находитесь в Mozilla, проверьте этот ответ.

  • 0
    Большое спасибо....
5

В Ruby on Rails вы можете сделать в контроллере:

headers['Access-Control-Allow-Origin'] = '*'
  • 0
    в какой контроллер вы вставите это, если это AJAX-вызов? Могу ли я увидеть больше контекста кода?
5

Если вы получили это в Angular.js, убедитесь, что вы избегаете номера своего порта следующим образом:

var Project = $resource(
    'http://localhost\\:5648/api/...', {'a':'b'}, {
        update: { method: 'PUT' }
    }
);

Подробнее см. здесь.

5

Это связано с политикой того же происхождения. Подробнее в Mozilla Developer Network или Wikipedia.

В основном, в вашем примере вам нужно загрузить страницу http://nqatalog.negroesquisso.pt/login.php только с nqatalog.negroesquisso.pt, а не localhost.

  • 1
    Но мне нужно загрузить веб-сервис с мобильного устройства, я бы обойти это?
  • 0
    Ну, вам нужно внести некоторые изменения на стороне сервера или использовать JSONP en.wikipedia.org/wiki/JSONP
4

У нас также есть та же проблема, что и приложение phonegap, протестированное в хроме. Одна машина Windows, которую мы используем ниже пакетного файла каждый день перед тем, как открыть Chrome. Помните, прежде чем запускать это, вам нужно очистить весь экземпляр chrome от диспетчера задач или вы можете выбрать хром, чтобы он не работал в фоновом режиме.

BATCH: (используйте cmd)

cd D:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security
1

Если вы работаете с Chrome, вы можете просто установить расширение Chrome из магазина Chrome, чтобы решить проблемы, связанные с CORS.

Расширение: ссылка Allow-Control-Allow-Origin: [ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en][1]

1
 **Add this meta tag in your Webservice**


 header('Content-type: application/json');
 header('Access-Control-Allow-Origin: *');
1

В Ruby Sinatra

response['Access-Control-Allow-Origin'] = '*' 

для всех или

response['Access-Control-Allow-Origin'] = 'http://yourdomain.name' 
0

Подстановочный знак не очень безопасный вариант. Вы хотите, чтобы это было более конкретно - проверьте ответ, который я написал здесь по тому же вопросу; как обойти Access-Control-Allow-Origin?

0

Когда вы получите запрос, вы можете

var origin = (req.headers.origin || "*");

чем при ответе на вызов:

res.writeHead(
    206,
    {
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': origin,
    }
);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню