Почему в моем коде JavaScript появляется ошибка "Нет заголовка Access-Control-Allow-Origin" на запрошенном ресурсе ", а у Postman - нет?

Я пытаюсь выполнить авторизацию с помощью 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);
    });
+2268
17 нояб. '13 в 19:29
источник поделиться
43 ответа
  • 1
  • 2

Если я правильно понял, вы делаете XMLHttpRequest в другой домен, чем ваша страница. Таким образом, браузер блокирует его, поскольку он обычно разрешает запрос в том же самом источнике по соображениям безопасности. Вам нужно сделать что-то другое, если вы хотите выполнить кросс-доменный запрос. Учебник о том, как достичь этого, Использование CORS.

Когда вы используете почтальон, они не ограничены этой политикой. Цитируется из Cross-Origin XMLHttpRequest:

Обычные веб-страницы могут использовать объект XMLHttpRequest для отправки и получения данных с удаленных серверов, но они ограничены одной и той же политикой происхождения. Расширения не так ограничены. Расширение может разговаривать с удаленными серверами за пределами его происхождения, если оно сначала запрашивает разрешения перекрестного происхождения.

+1230
17 нояб. '13 в 19:49
источник

Это не исправление для производства или когда приложение должно быть показано клиенту, это полезно только тогда, когда пользовательский интерфейс и бэкэнд разработка находятся на разных серверах и в они фактически находятся на одном сервере. Например: при разработке пользовательского интерфейса для любого приложения, если есть необходимость протестировать его локально, указывая на сервер бэкэнд, в этом случае это идеальное решение. Для производственного исправления заголовки CORS должны быть добавлены на серверный сервер, чтобы разрешить доступ к перекрестному контенту.

Самый простой способ - просто добавить расширение в google chrome, чтобы разрешить доступ с помощью CORS.

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

Просто включите это расширение, если вы хотите разрешить доступ к запросу заголовка 'access-control-allow-origin'.

Или

В Windows вставьте эту команду в окно выполнить

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

это откроет новый браузер chrome, который разрешит доступ к запросу заголовка "access-control-allow-origin-origin" .

+511
04 мар. '15 в 6:42
источник
другие ответы

Связанные вопросы


Похожие вопросы

Если вы вернетесь в JSON, попробуйте использовать JSONP (обратите внимание на P в конце) для разговора между доменами:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Подробнее о работе с JSONP здесь:

Появление JSONP - по существу согласованного межсайтового скриптинга - открыло дверь для мощных mashups контента. Многие известные сайты предоставляют услуги JSONP, позволяя вам получать доступ к их контенту через предопределенный API.

+336
22 февр. '14 в 0:42
источник

Предупреждение: использование этого ответа в рабочей среде может вызвать проблему безопасности, при которой ваш API/сервис может вызываться любым лицом, включая злоумышленников. Вы должны использовать сеансы и куки для аутентификации, чтобы предотвратить API/службу от этой атаки. Ваш 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!"

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

+214
03 дек. '14 в 20:24
источник

Я хочу, чтобы кто-то поделился этим сайтом со мной давно http://cors.io/, он бы сэкономил массу времени по сравнению со строительством и полагался на мой собственный прокси. Однако, когда вы переходите к производству, ваш собственный прокси-сервер является лучшим выбором, поскольку вы все еще контролируете все аспекты своих данных.

Все, что вам нужно:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

+176
21 июл. '15 в 22:08
источник

Если вы используете Node.js, попробуйте:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Дополнительная информация: CORS на ExpressJS

+73
12 февр. '16 в 16:27
источник

Там есть проблема с несколькими доменами, использующая Ajax. Вы должны быть уверены, что получаете доступ к своим файлам на одном и том же пути http:// без www. (или доступа из http://www. и отправляете на тот же путь, включая www.), который браузер рассматривает как другой домен при доступе через www., поэтому вы видите, где проблема. Вы отправляете в другой домен, и браузер блокирует поток из-за проблемы с выпуском.

Если API не размещен на том же хосте, который вы запрашиваете, поток блокируется, и вам нужно будет найти другой способ связи с API.

+66
12 мар. '14 в 8:53
источник

Так как
$.ajax({типа: "POST" - вызовы OPTIONS
$.post( - вызывает POST

оба разных почтальона правильно называют "POST", но при вызове это будет "OPTIONS"

Для веб-сервисов С# - webapi

Добавьте следующий код в файл 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");
    }
});

Выпуск Angular 4 см. По адресу: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/.

Примечание. Если вы ищете загрузку контента со стороннего веб-сайта, это вам не поможет. Вы можете попробовать следующий код, но не JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");
+56
13 дек. '16 в 13:02
источник

Попробуйте XDomain,

Реферат: Чистая альтернатива JavaScript CORS/ polyfill. Не требуется настройка сервера - просто добавьте proxy.html в домене, с которым вы хотите общаться. Эта библиотека использует XHook для привязки всех XHR, поэтому XDomain должен работать совместно с любой библиотекой.

+22
01 апр. '14 в 7:46
источник

Если вы не хотите, чтобы:

  1. Отключить веб-безопасность в Chrome
  2. Используйте JSONP
  3. Используйте сторонний сайт для перенаправления ваших запросов

и вы уверены, что на вашем сервере включена поддержка CORS (протестируйте CORS здесь: http://www.test-cors.org/)

Затем вам нужно передать параметр origin с вашим запросом. Этот источник ДОЛЖЕН соответствовать источнику, который ваш браузер отправляет с вашим запросом.

Вы можете увидеть это в действии здесь: http://www.wikinomad.com/app/detail/Campgrounds/3591

Функция редактирования отправляет запрос GET & POST в другой домен для извлечения данных. Я установил параметр источника, который решает проблему. Бэкэнд - это движок mediaWiki.

TL;DR: добавьте параметр "origin" к вашим вызовам, который должен быть параметром Origin, который отправляет ваш браузер (вы не можете подделать параметр origin)

+12
07 июл. '16 в 4:26
источник

У меня возникла проблема с этим, когда я использовал AngularJS для доступа к моему API. Тот же запрос работал в SoapUI 5.0 и ColdFusion. Мой метод GET уже имел заголовок Access-Control-Allow-Origin.

Я узнал, что AngularJS делает "пробный" запрос OPTIONS. ColdFusion, по умолчанию, генерирует метод OPTIONS, но в нем не так много, эти заголовки специально. Ошибка возникла в ответ на этот вызов OPTIONS, а не на мой намеренный вызов GET. После того, как я добавил метод OPTIONS ниже в свой API, проблема была решена.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
+10
29 янв. '15 в 0:06
источник

Основываясь на ответе на shruti, я создал ярлык браузера Chrome с необходимыми аргументами: введите описание изображения здесь введите описание изображения здесь

+10
02 июл. '16 в 23:52
источник

У меня была следующая конфигурация, приводящая к той же ошибке при запросе ответов с сервера.

Серверная сторона: SparkJava → предоставляет REST-API
Клиентская сторона: ExtJs6 → обеспечивает рендеринг браузера

На стороне сервера мне пришлось добавить это в ответ:

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

На стороне клиента мне пришлось добавить это в запрос:

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
+8
18 сент. '15 в 14:50
источник

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

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Здесь ссылка с объяснением: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

+8
21 нояб. '16 в 14:59
источник

https://github.com/Rob--W/cors-anywhere/ предоставляет (Node.js) код, который вы можете использовать для настройки и запуска собственного прокси-сервера CORS. Он активно поддерживается и предоставляет ряд функций для управления прокси-поведением за пределами простой отправки правильных заголовков ответов Access-Control-*.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS содержит подробные сведения о том, как браузеры обрабатывают запросы кросс-происхождения, которые клиентские веб-приложения создают из JavaScript и какие заголовки вы должны настроить отправку сервером запроса, если вы можете.

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

Как уже упоминалось в других комментариях, есть веские причины не доверять открытому прокси с вашими запросами. Тем не менее, если вы знаете, что делаете, и вы решаете, что открытый прокси работает для ваших нужд, https://cors-anywhere.herokuapp.com/ - это тот, который надежно доступен, активно поддерживается, и он запускает экземпляр https://github.com/Rob--W/cors-anywhere/.

Как и в случае с другими открытыми прокси-серверами, упомянутыми здесь (пара, по крайней мере, кажется, больше недоступна), способ, которым он работает, заключается в том, что вместо того, чтобы ваш клиентский код отправлял запрос напрямую, например, http://foo.com, вы отправьте его в https://cors-anywhere.herokuapp.com/http://foo.com, и прокси добавит необходимые заголовки Access-Control-* в ответ, который видит браузер.

+8
12 мар. '17 в 7:01
источник

Если вы используете Entity Framework, похоже, что эта ошибка иногда будет возникать, даже если у вас включен CORS. Я понял, что ошибка произошла из-за отсутствия завершения запроса. Я надеюсь, что это поможет другим в той же ситуации.

Следующий код может XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. ошибка:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Чтобы это исправить, требуется вызов финализации, например .ToList() или .FirstOrDefault() в конце запроса, например:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
+6
03 нояб. '15 в 8:00
источник

В моем случае я использовал приложение JEE7 JAX-RS, и следующие трюки отлично работали для меня:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
+6
13 авг. '16 в 16:40
источник

Я успешно смог решить (в моем случае со шрифтами) использование htaccess, но, очевидно, OP спрашивает немного иначе. Но вы можете использовать шаблон FileMatch и добавить любое расширение, чтобы оно не выдавало ошибку кросса.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.apache.org/docs/2.4/mod/core.html#filesmatch

+6
15 июн. '17 в 8:39
источник

Популярный вопрос - Еще одна вещь, на которую нужно смотреть, если вы читали это далеко, и ничего больше не помогло. Если у вас есть CDN, например Akamai, Limelight или подобное, вы можете проверить ключ кеша, который у вас есть для URI ресурса. Если он не содержит значение заголовка Origin, вы можете вернуть ответ в кешированный запрос по другому источнику. Мы просто потратили полдня на отладку. Конфигурация CDN была обновлена, чтобы включать только значение Origin для нескольких выбранных доменов, которые являются нашими, и установить для него значение null для всех остальных. Это похоже на работу и позволяет браузерам из наших известных доменов просматривать наши ресурсы. Конечно, все остальные ответы являются предпосылками для получения здесь, но если CDN является первым переходом из вашего браузера, это то, что нужно рассмотреть.

В нашем случае мы могли видеть, как некоторые запросы поступают к нашему сервису, но не почти по объему, который отправлял сайт. Это указывало нам на CDN. Мы смогли вернуться и посмотреть, что исходный запрос был подан с помощью прямого запроса, а не части вызова AJAX браузера, и заголовок ответа Access-Control-Allow-Origin не был включен. По-видимому, CDN кэшировал это значение. Конфигурация конфигурации Akamai CDN, чтобы рассмотреть значение заголовка запроса Origin как часть совпадения, похоже, заставило его работать для нас.

+4
07 сент. '17 в 14:49
источник

Если вы получите это сообщение об ошибке в браузере:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

когда вы пытаетесь выполнить запрос 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));

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

Ответ скопирован и вставлен из NizarBsb

+4
26 окт. '17 в 13:23
источник

Для API GoLang:

Сначала вы можете посмотреть MDN CORS Doc, чтобы узнать, что такое CORS. Насколько я знаю, CORS говорит о том, разрешать ли Origin Request доступ к ресурсу сервера или нет.

И вы можете ограничить, какой источник запроса может получить доступ к серверу, установив Access-Control-Allow-Origin в Header ответа сервера.

Например, установка следующего заголовка в ответе сервера означает, что только запрос, отправленный из http://foo.example, может получить доступ к вашему серверу:

Access-Control-Allow-Origin: http://foo.example

и затем разрешить запрос, отправленный из любого источника (или домена):

Access-Control-Allow-Origin: *

И как я знаю в сообщении об ошибке, requested resource означает ресурс сервера, поэтому No 'Access-Control-Allow-Origin' header is present on the requested resource. означает, что вы не установили заголовок Access-Control-Allow-Origin в вашем ответе сервера, или, может быть, вы установили, но источник запроса isn ' t в Access-Control-Allow-Origin, поэтому запрос не допускается:

Нет заголовка "Access-Control-Allow-Origin" присутствует на запрошенном ресурсе. Поэтому исходный "null" не допускается.

В GoLang я использую пакет gorilla/mux для сборки сервера API в localhost:9091, и я разрешаю CORS путем добавления "Access-Control-Allow-Origin", "*" в заголовок ответа:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

И я использую JavaScript в клиенте, в localhost:9092 сделать запрос от Chrome может успешно получить "OKOK" с сервера localhost:9091.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Кроме того, вы можете проверить свой заголовок запроса/ответа с помощью таких инструментов, как Fiddler.

+4
19 нояб. '17 в 12:19
источник

Если вы хотите исправить это на бэкэнде (в Flask), а не на внешнем интерфейсе, я бы полностью порекомендовал пакет Flask CORS Python. Колба КОРС

С помощью одной простой строки в вашем app.py вы можете автоматически вставить стандарт, разрешить любой заголовок источника или настроить его в соответствии с требованиями.

+4
11 авг. '18 в 10:46
источник

поместите это перед вашим URL: https://cors-anywhere.herokuapp.com/

так, например: https://cors-anywhere.herokuapp.com/https://www.ndbc.noaa.gov/data/realtime2/46258.txt

+4
27 июн. '19 в 18:51
источник

Много раз это происходит со мной от javascript к моему php api, потому что одна из нескольких причин. Я забыл поставить <?php header('Access-Control-Allow-Origin: *'); ? один. Это полезно для доступа к перекрестным доменам. Другая причина заключается в том, что в jQuery ajax-запросе я указываю конкретный тип данных и возвращаю другой тип данных, поэтому он выдает ошибку.

Последняя и наиболее известная аргументация этой ошибки заключается в том, что на странице, которую вы запрашиваете, есть ошибка синтаксического анализа. Если вы нажмете URL-адрес этой страницы в своем браузере, более вероятно, вы увидите ошибку синтаксического анализа, и у вас будет номер строки для решения проблемы.

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

+3
25 мар. '16 в 20:54
источник

В запросе JSONP вы должны перехватить "jsonpCallback" и отправить его обратно:

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Со стороны сервера (если вы используете PHP как сервер):

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

В этом случае ответ сервера выглядит так:

jQuery331009526199802841284_1533646326884 ({ "ф": "192.168.1.1"})

Но вы можете установить "jsonpCallback" вручную на внешнем интерфейсе и перехватить его на стороне сервера:

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

В этом случае ответ сервера выглядит так:

get_ip ({ "ф": "192.168.1.1"})

+3
07 авг. '18 в 13:38
источник

CORS для вас.

CORS - это совместное использование ресурсов Cross Origin, и это способ отправки запроса междоменного доступа. Теперь API XMLHttpRequest2 и Fetch поддерживают CORS.

Но он имеет свои пределы. Серверу требуется конкретное требование Access-Control-Allow-Origin, и его нельзя установить в '*'.

И если вы хотите, чтобы любое происхождение могло отправить вам запрос, вам нужен JSONP (также нужно установить Access-Control-Allow-Origin, но может быть "*" ).

Для большого количества запросов, если вы не знаете, что выбрать, я думаю, для этого вам нужен полностью функциональный компонент. Позвольте мне ввести простой компонент catta


Если вы используете современный браузер ( > Internet Explorer9, Chrome, Firefox, Edge и т.д.), очень рекомендуется использовать простой, но красивый компонент, https://github.com/Joker-Jelly/catta. Он не имеет зависимостей, составляет менее 3 килобайт, и он поддерживает Fetch, Ajax и JSONP с такими же простыми синтаксисами и параметрами.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Он также поддерживает весь способ импорта в ваш проект, например, модуль ES6, CommonJS и даже <script> в HTML.

+2
19 янв. '17 в 14:40
источник

Я получил эту ошибку с $http.get в Angular. Мне нужно было использовать $http.jsonp.

+2
13 февр. '17 в 17:46
источник

На моем веб-сайте (на основе .NET) я только что добавил это:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Большое спасибо это видео.

+2
19 авг. '17 в 15:13
источник

Для полноты Apache разрешает cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
+2
20 нояб. '17 в 0:05
источник

Большинство из этих ответов говорят пользователям, как добавить заголовки CORS на сервер, которым они управляют.

Однако если вам нужны данные с сервера, который вы не контролируете на веб-странице, одним из решений является создание тега сценария на вашей странице, установите для атрибута src конечную точку API, у которой нет заголовков CORS, а затем загрузите эти данные. на страницу:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
+2
31 янв. '18 в 15:13
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос