На запитуваному ресурсі немає заголовка "Access-Control-Allow-Origin". Таким чином, походження "..." не має права доступу

Я використовую .htaccess для переписування URL-адрес, і я використовував html базовий тег для того, щоб він працював.

Тепер, коли я намагаюся зробити запит на ajax, я отримую таку помилку:

Неможливо завантажити XMLHttpRequest http://www.example.com/login.php. На запитуваному ресурсі немає заголовка "Access-Control-Allow-Origin". Тому походження " http://example.com" не має доступу.

Використовуйте addHeaderЗамість використання setHeaderметоду,

response.addHeader("Access-Control-Allow-Origin", "*");

*у верхньому рядку дозволить access to all domains.

Для дозволу access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

Перевірте це blog post.

Чому виникає помилка:

Код JavaScript обмежений політикою одного джерела , тобто, зі сторінки на www.example.com, ви можете тільки зробити (AJAX) запити до служб , розташованим в точно тому ж домені, в цьому випадку, точно www.example.com( НЕ example.com - без www- чи whatever.example.com).

У вашому випадку ваш код Ajax намагається отримати доступ до послуги http://wordicious.comзі сторінки, розташованої за адресою http://www.wordicious.com.

Хоча вони дуже схожі, вони не є одним і тим же доменом. І коли вони не перебувають у одному домені, запит буде успішним лише у тому випадку, якщо відповідь цілі містить у собі Access-Control-Allow-Originзаголовок.

Оскільки ваша сторінка / служба в http://wordicious.comніколи не була налаштована на подання такого заголовка, це повідомлення про помилку відображається.

Рішення:

Як було сказано, початкові (де знаходиться сторінка з JavaScript) та цільовий (де JavaScript намагається досягти) домени повинні бути точно однаковими.

Ваш вигляд здається помилковим. Схоже http://wordicious.comі http://www.wordicious.comнасправді той самий сервер / домен. Таким чином , щоб виправити, введіть мета і походження однаково: зробити вас Ajax запит коду сторінки / послуги , щоб http://www.wordicious.comНЕhttp://wordicious.com . (Можливо, розташуйте цільову URL-адресу відносно, наприклад '/login.php', без домену).

Більш загальна примітка:

Якщо проблема не є помилковою помилкою, як у цьому питанні, рішенням було б додати Access-Control-Allow-Originдо цільового домену . Щоб додати його, звичайно, залежить сервер / мова, що стоїть за цією адресою. Іноді змінна конфігурація в інструменті виконає трюк. В інших випадках вам доведеться самостійно додавати заголовки через код.

Для сервера .NET можна налаштувати це в web.config, як показано нижче

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Наприклад, скажімо, якщо домен сервера http://live.makemypublication.com, а клієнт - http://www.makemypublication.com, то налаштуйте на веб-сервері web.config, як показано нижче

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

Якщо ви отримуєте це повідомлення про помилку від браузера:

На запитуваному ресурсі немає заголовка "Access-Control-Allow-Origin". Таким чином, походження "..." не має права доступу

коли ви намагаєтесь зробити запит Ajax POST / GET на віддалений сервер, який не контролюється, забудьте про це просте виправлення:

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

Те, що вам потрібно зробити, особливо якщо ви використовуєте JavaScript лише для запиту Ajax, це внутрішній проксі, який приймає ваш запит і надсилає його на віддалений сервер.

Спочатку у вашому JavaScript виконайте дзвінок Ajax на власний сервер, наприклад:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Потім створіть простий файл PHP під назвою proxy.php, щоб обернути ваші POST-дані та додати їх до віддаленого сервера URL-адрес у якості параметрів. Я наводжу вам приклад того, як я обминаю цю проблему за допомогою API пошуку готелю Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Роблячи:

 echo json_encode(file_get_contents($url));

Ви просто робите той же запит, але на стороні сервера, і після цього він повинен працювати добре.

Вам потрібно додати це на початку вашої сторінки php "login.php"

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

ви повинні помістити заголовки клавіш / значень у відповідь методом відповіді. Наприклад, якщо у вас є ресурс за адресою http://mydomain.com/myresource , у коді вашого сервера ви пишете

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}

В основному змініть відповідь заголовка API, додавши наступні параметри.

Access-Control-Allow-Credentials: вірно

Контроль доступу-дозволити-вихід: *

Але це не гарне рішення, коли мова йде про безпеку

Вирішення проблеми полягає у використанні зворотного проксі-сервера, що працює на вашому хості "source" та пересилає його на ваш цільовий сервер, наприклад Fiddler:

Посилання тут: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Або проксі-сервер Apache Reverse ...

Додайте це до файлу PHP або основного контролера

header("Access-Control-Allow-Origin: http://localhost:9000");

Вирішено із записом нижче в httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

Просимо знайти функцію, що використовується у XMLHTTPREQUEST в Javascript для налаштування заголовків запитів.

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

Довідка: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader