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


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

XMLHttpRequest не может загрузить Http: // myApiUrl / Логин , В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому исходный 'null' не допускается.

Я знаю, что API или удаленный ресурс должен устанавливать заголовок, но почему он работал, когда я сделал запрос через расширение Chrome Почтальон ?

Это код запроса:

$.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);
    });

1806


источник


Ответы:


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

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

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


973



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

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

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

Просто включите это расширение, когда вы хотите разрешить доступ к 'Контроля доступа-Allow-Origin' запрос заголовка.

Или

В Windows вставьте эту команду в бег окно

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

это откроет новый хром браузер, который 'Контроля доступа-Allow-Origin' запрос заголовка.


441



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

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

Узнайте больше о работе с JSONP Вот :

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


305



Это очень просто решить, если вы используете PHP , Просто добавьте следующий скрипт в начале вашей страницы PHP, которая обрабатывает запрос:

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

Предупреждение: Это содержит проблему безопасности для вашего PHP-файла, которую он может вызвать злоумышленники. вы должны использовать сеансы и файлы cookie для проверки подлинности, чтобы предотвратить ваш файл / службу от этой атаки. Ваш сервис уязвим для кросс-сайт-подлог (CSRF).

Если вы используете Узел-красный вы должны разрешить 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"
},

183



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

Все, что тебе нужно:

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


133



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

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


59



Если вы используете 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


51



Because
$.ajax({type: "POST" - Calls OPTIONS
$.post( - Calls POST

both are different Postman calls "POST" properly but when we call it will be "OPTIONS"

For c# web services - webapi

Please add the following code in your web.config file under <system.webServer> tag. This will work

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

Please make sure you are not doing any mistake in the ajax call

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 issue please refer : http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Note: If you are looking downloading content from third party website then this will not help you. You can try the following code but not JavaScript.

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

39



Try XDomain,

Summary: A pure JavaScript CORS alternative/polyfill. No server configuration required - just add a proxy.html on the domain you wish to communicate with. This library uses XHook to hook all XHR, so XDomain should work in conjunction with any library.


22



If you do NOT want to:

  1. Disable web security in Chrome
  2. Use JSONP
  3. Use a third party site to re-route your requests

and you are sure that your server has CORS enabled then (test CORS here: http://www.test-cors.org/)

Then you need to pass in origin parameter with your request. This origin MUST match the origin that your browser sends with your request.

You can see it in action here: http://www.wikibackpacker.com/app/detail/Campgrounds/3591

The edit functionality sends a GET & POST request to a different domain for fetching data. I set the origin parameter which resolves the issue. The backend is a mediaWiki engine.

tldr: Add "origin" parameter to your calls which must be the Origin parameter that your browser sends (you cannot spoof the origin parameter)


9



I had a problem with this when I used AngularJS to access my API. The same request worked in SoapUI 5.0 and ColdFusion. My GET method already had Access-Control-Allow-Origin header.

I found out that AngularJS makes a "trial" OPTIONS request. ColdFusion, by default, generates OPTIONS method, but it doesn’t have much, these headers specifically. The error was generated in response to that OPTIONS call, and not to my intentional call to GET. After I added OPTIONS method below to my API, the problem has been resolved.

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

8