Почему почтальон не получает сообщение об ошибке «Отсутствует заголовок Access-Control-Allow-Origin» на запрошенном ресурсе », когда мой код JavaScript появляется?

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

Пожалуйста, прекратите публикацию :

• Конфигурации CORS для каждого языка / фреймворка под солнцем. Вместо этого найдите вопрос вашего языка / основы .
• Сторонние сервисы, позволяющие обойти запрос CORS
• Параметры командной строки для отключения CORS для различных браузеров

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

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

Для более подробной информации, вы можете проверить документацию Flask .

Потому что
$ .ajax ({type: "POST" - вызывает OPTIONS
$ .post ( - вызывает POST

Оба разные. Почтальон правильно называет «POST», но когда мы его называем, это будут «OPTIONS».

Для веб-сервисов C # - веб-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 появляется в браузере, а не в Почтальоне.

В приведенном ниже исследовании в качестве 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"

Обнаружена одна и та же ошибка в другом случае использования.

Вариант использования: в chrome при попытке вызвать конечную точку 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")]