Чому листоноша не отримує заголовок "Ні" Access-Control-Allow-Origin "на запитуваному ресурсі", коли мій код JavaScript робить?

Мода примітка : Це питання стосується того, чому Postman не підпадає під обмеження CORS так само, як і XMLHttpRequest. Це питання не стосується того, як виправити помилку "Ні" Access-Control-Allow-Origin "...".

Будь ласка, припиніть публікацію :

• Конфігурації CORS для кожної мови / рамки під сонцем. Замість цього знайдіть відповідне питання щодо мови / рамки .
• Сторонні послуги, які дозволяють запит обійти CORS
• Параметри командного рядка для вимкнення CORS для різних браузерів

Я намагаюся зробити авторизацію за допомогою JavaScript , підключившись до вбудованої колби RESTful API . Однак, коли я роблю запит, я отримую таку помилку:

XMLHttpRequest не може завантажити http: // myApiUrl / login . На запитуваному ресурсі немає заголовка "Access-Control-Allow-Origin". Таким чином, джерело "null" не має доступу.

Я знаю, що API або віддалений ресурс повинен встановлювати заголовок, але чому він працював, коли я робив запит через розширення Chrome Postman ?

Це код запиту:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

Якщо я зрозумів це правильно, ви робите XMLHttpRequest для іншого домену, ніж ваша сторінка. Таким чином, браузер блокує його, оскільки він зазвичай допускає запит того самого походження з міркувань безпеки. Вам потрібно зробити щось інше, коли ви хочете зробити запит між доменами. Підручник про те, як цього досягти - Використання CORS .

Коли ви використовуєте листоношу, ця політика не обмежується. Цитується з перехресного походження XMLHttpRequest :

Звичайні веб-сторінки можуть використовувати об'єкт XMLHttpRequest для надсилання та отримання даних з віддалених серверів, але вони обмежені тією самою політикою походження. Розширення не такі обмежені. Розширення може спілкуватися з віддаленими серверами за межами його походження, доки воно спочатку вимагає дозволів між походженням.

ПОПЕРЕДЖЕННЯ. Використання Access-Control-Allow-Origin: *може зробити ваш API / веб-сайт уразливим для атак на підробку між сайтами (CSRF). Переконайтеся, що ви розумієте ризики, перш ніж використовувати цей код.

Це дуже просто вирішити, якщо ви використовуєте PHP . Просто додайте наступний скрипт на початку вашої сторінки PHP, який обробляє запит:

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

Якщо ви використовуєте Node-red, ви повинні дозволити CORS у node-red/settings.jsфайлі, не коментуючи наступні рядки:

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

Якщо ви використовуєте Flask так само, як і питання; ви повинні спочатку встановитиflask-cors

$ pip install -U flask-cors

Потім включіть колби у свою заявку.

from flask_cors import CORS

Простий додаток виглядатиме так:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Для отримання більш детальної інформації ви можете перевірити документацію на колбу .

Тому що
$ .ajax ({тип: "POST" - викликає ОПЦІЇ
$ .post ( - Дзвінки POST)

Обидва різні. Листоноша належним чином називає "POST", але коли ми його зателефонуємо, це буде "OPTIONS".

Для веб-служб C # - Web API

Будь ласка, додайте такий код у файл web.config під тегом <system.webServer>. Це спрацює:

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Будь ласка, переконайтеся, що ви не робите жодної помилки у виклику Ajax

jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

Примітка: Якщо ви шукаєте для завантаження контенту з веб - сайту третьою стороною , то це не допоможе . Ви можете спробувати наступний код, але не JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");

Застосування обмеження CORS - це функція безпеки, визначена сервером та реалізована браузером .

Браузер розглядає політику CORS сервера та поважає її.

Однак інструмент Postman не турбується про політику CORS на сервері.

Ось чому помилка CORS з’являється в браузері, але не в Postman.

У нижченаведеному дослідженні як API я використовую http://example.com замість http: // myApiUrl / login з вашого запитання, тому що цей перший працює.

Я припускаю, що ваша сторінка знаходиться на http: //my-site.local: 8088 .

Причина, чому ви бачите різні результати, полягає в тому, що листоноша:

• встановити заголовок Host=example.com(ваш API)
• НЕ встановити заголовок Origin

Це подібно до способу надсилання запитів у веб-переглядачах, коли сайт і API мають однаковий домен (браузери також встановлюють елемент заголовка Referer=http://my-site.local:8088, однак я його не бачу в Postman). Якщо Originзаголовок не встановлений, зазвичай сервери дозволяють такі запити за замовчуванням.

Це стандартний спосіб, як поштальон надсилає запити. Але браузер надсилає запити по-різному, коли на вашому веб-сайті та API є різні домени , і тоді виникає CORS і браузер автоматично:

• встановлює заголовок Host=example.com(ваш як API)
• встановлює заголовок Origin=http://my-site.local:8088(ваш сайт)

(Заголовок Refererмає те саме значення, що і Origin). А тепер на вкладці " Консолі та мережі Chrome" ви побачите:

Коли у вас Host != Originце CORS, і коли сервер виявляє такий запит, він зазвичай блокує його за замовчуванням .

Origin=nullвстановлюється, коли ви відкриваєте вміст HTML з локального каталогу, і він надсилає запит. Така ж ситуація, коли ви надсилаєте запит всередині <iframe>, як, наприклад, у фрагменті нижче (але тут Hostзаголовок взагалі не встановлений) - загалом, скрізь, де специфікація HTML говорить про непрозоре походження, ви можете перекласти це на Origin=null. Більше інформації про це ви можете знайти тут .

fetch('http://example.com/api', {method: 'POST'});

Look on chrome-console > network tab

Якщо ви не використовуєте простий запит CORS, зазвичай браузер автоматично надсилає запит OPTIONS перед тим, як надсилати основний запит - більше інформації тут . Розріз нижче показаний:

fetch('http://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json'}
});

Look in chrome-console -> network tab to 'api' request.
This is the OPTIONS request (the server does not allow sending a POST request)

Ви можете змінити конфігурацію вашого сервера, щоб дозволити запити CORS.

Ось приклад конфігурації, яка вмикає CORS на nginx (файл nginx.conf) - будьте дуже обережні з налаштуваннями always/"$http_origin"для nginx та "*"Apache - це розблокує CORS з будь-якого домену.

location ~ ^/index\.php(/|$) {
   ...
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin';
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

Ось приклад конфігурації, яка вмикає CORS на Apache (.htaccess файл)

# ------------------------------------------------------------------------------
# | Cross-domain Ajax requests                                                 |
# ------------------------------------------------------------------------------

# Enable cross-origin Ajax requests.
# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
# http://enable-cors.org/

# <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
# </IfModule>

# Header set Header set Access-Control-Allow-Origin "*"
# Header always set Access-Control-Allow-Credentials "true"

Access-Control-Allow-Origin "http://your-page.com:80"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"

Зустрічалася однакова помилка в різних випадках використання.

Використовуйте випадок: У хромі, коли намагалися зателефонувати до кінцевої точки Spring REST у кутку.

Рішення: Додайте @CrossOrigin ("*") примітку поверх відповідного класу контролерів.

Якщо ви використовуєте .NET як свій середній рівень, чітко перевірте атрибут маршруту, наприклад,

У мене були проблеми, коли це було так,

[Route("something/{somethingLong: long}")] //Space.

Виправлено це,

[Route("something/{somethingLong:long}")] //No space

Тільки для проекту .NET Core Web API додайте наступні зміни:

1. Додайте наступний код після services.AddMvc()рядка в ConfigureServices()методі файлу Startup.cs:

services.AddCors(allowsites=>{allowsites.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });

2. Додайте наступний код за app.UseMvc()рядком у Configure()методі файлу Startup.cs:

app.UseCors(options => options.AllowAnyOrigin());

3. Відкрийте контролер, до якого ви хочете отримати доступ за межами домену, і додайте цей наступний атрибут на рівні контролера:

[EnableCors("AllowOrigin")]