AJAX w Chrome wysyła OPCJE zamiast GET / POST / PUT / DELETE?

W pracy pracuję nad wewnętrzną aplikacją internetową. W IE10 żądania działają dobrze, ale w Chrome wszystkie żądania AJAX (których jest wiele) są wysyłane za pomocą OPCJI zamiast dowolnej zdefiniowanej metody, którą im daję. Technicznie rzecz biorąc, moje żądania są „między domenami”. Witryna jest obsługiwana przez localhost: 6120, a usługa, do której wysyłam żądania AJAX, znajduje się na 57124. Ten zamknięty błąd jquery definiuje problem, ale nie jest prawdziwą poprawką.

Co mogę zrobić, aby użyć właściwej metody http w żądaniach AJAX?

Edytować:

To jest w ładowaniu dokumentów na każdej stronie:

jQuery.support.cors = true;

Każdy AJAX jest zbudowany podobnie:

var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
    url: url,
    dataType: "json",
    data: json,
    async: true,
    cache: false,
    timeout: 30000,
    headers: { "x-li-format": "json", "X-UserName": userName },
    success: function (data) {
        // my success stuff
    },
    error: function (request, status, error) {
        // my error stuff
    },
    type: "POST"
});

Chrome wstępnie sprawdza żądanie wyszukania nagłówków CORS . Jeśli żądanie zostanie zaakceptowane, wyśle ​​prawdziwe żądanie. Jeśli robisz to w wielu domenach, będziesz musiał po prostu sobie z tym poradzić lub znaleźć sposób, aby żądanie nie było międzydomenowe. Dlatego błąd jQuery został zamknięty jako nie do naprawienia. Jest to zgodne z projektem.

W przeciwieństwie do prostych żądań (omówionych powyżej), żądania „wstępnie sprawdzone” najpierw wysyłają żądanie HTTP metodą OPTIONS do zasobu w innej domenie, aby określić, czy rzeczywiste żądanie jest bezpieczne do wysłania. Żądania między witrynami są wstępnie analizowane w ten sposób, ponieważ mogą mieć wpływ na dane użytkownika. W szczególności wniosek jest wstępnie sprawdzany, jeśli:

• Używa metod innych niż GET, HEAD lub POST. Ponadto, jeśli POST jest używany do wysyłania danych żądania z typem zawartości innym niż application / x-www-form-urlencoded, multipart / form-data lub text / plain, np. Jeśli żądanie POST wysyła ładunek XML do serwera przy użyciu application / xml lub text / xml, a następnie żądanie jest wstępnie sprawdzane.
• Ustawia niestandardowe nagłówki w żądaniu (np. Żądanie używa nagłówka, takiego jak X-PINGOTHER)

Na podstawie tego, że żądanie nie jest wysyłane na domyślnym porcie 80/443, to wywołanie Ajax jest automatycznie uznawane za żądanie zasobów między źródłami (CORS) , co innymi słowy oznacza, że ​​żądanie automatycznie wysyła żądanie OPTIONS, które sprawdza Nagłówki CORS po stronie serwera / serwletu.

Dzieje się tak, nawet jeśli ustawisz

crossOrigin: false;

lub nawet jeśli to pominiesz.

Powód jest po prostu taki localhost != localhost:57124. Spróbuj wysłać go tylko localhostbez portu - nie powiedzie się, ponieważ żądany cel nie będzie osiągalny, jednak zauważ, że jeśli nazwy domen są równe, żądanie jest wysyłane bez żądania OPTIONS przed POST.

Zgadzam się z Kevinem B. Raport o błędzie mówi wszystko. Wygląda na to, że próbujesz wykonywać połączenia AJAX między domenami. Jeśli nie znasz tej samej zasady pochodzenia, możesz zacząć tutaj: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript .

Jeśli nie ma to być wywołanie AJAX między domenami, spróbuj ustawić docelowy adres URL jako względny i zobacz, czy problem zniknie. Jeśli naprawdę jesteś zdesperowany, zajrzyj do JSONP, ale uważaj, czai się chaos. Naprawdę niewiele więcej możemy zrobić, aby ci pomóc.

Jeśli to możliwe, przekaż parametry przez zwykłe GET / POST z inną nazwą i pozwól, aby kod po stronie serwera obsługiwał to.

Miałem podobny problem z moim własnym proxy, aby ominąć CORS i otrzymałem ten sam błąd POST-> OPTION w Chrome. To był Authorizationnagłówek w moim przypadku ( "x-li-format"i "X-UserName"tutaj w twoim przypadku). Skończyło się na przekazaniu go w formacie fikcyjnym (np. AuthorizatinJackW GET) i zmieniłem kod mojego serwera proxy, aby przekształcił go w nagłówek podczas wykonywania połączenia do miejsca docelowego . Tutaj jest w PHP:

if (isset($_GET['AuthorizationJack'])) {
    $request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

W moim przypadku wywołuję API hostowane przez AWS (API Gateway). Wystąpił błąd, gdy próbowałem wywołać interfejs API z domeny innej niż własna domena API. Ponieważ jestem właścicielem interfejsu API, włączyłem CORS dla środowiska testowego, zgodnie z opisem w dokumentacji Amazon .

W produkcji ten błąd nie wystąpi, ponieważ żądanie i api będą w tej samej domenie.

Mam nadzieję, że to pomoże!

Jak odpowiedział @Dark Falcon, po prostu sobie z tym poradziłem .

W moim przypadku używam serwera node.js i tworzę sesję, jeśli nie istnieje. Ponieważ metoda OPTIONS nie zawiera szczegółów sesji, ostatecznie utworzyła nową sesję dla każdego żądania metody POST.

Tak więc w mojej procedurze tworzenia sesji, jeśli nie istnieje, właśnie dodałem sprawdzenie, czy metoda jest OPTIONS, a jeśli tak, po prostu pomiń część tworzenia sesji:

    app.use(function(req, res, next) {
        if (req.method !== "OPTIONS") {
            if (req.session && req.session.id) {
                 // Session exists
                 next();
            }else{
                 // Create session
                 next();
          }
        } else {
           // If request method is OPTIONS, just skip this part and move to the next method.
           next(); 
        }
    }

Żądania „wstępnie sprawdzone” najpierw wysyłają żądanie HTTP metodą OPTIONS do zasobu w innej domenie, aby określić, czy rzeczywiste żądanie można bezpiecznie wysłać. Żądania między witrynami

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Rozważ użycie axios

axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

}).catch(function (error) {
   doAnythingError(error)
});

Miałem ten problem przy użyciu pobierania i axios działał idealnie.

Napotkałem bardzo podobny problem. Spędziłem prawie pół dnia, aby zrozumieć, dlaczego wszystko działa poprawnie w Firefoksie, a zawodzi w Chrome. W moim przypadku było to spowodowane zduplikowanymi (lub może błędnie wpisanymi) polami w nagłówku mojego żądania.

Użyj pobierania zamiast XHR, wtedy żądanie nie zostanie podświetlone, nawet jeśli jest między domenami.

 $.ajax({
            url: '###',
            contentType: 'text/plain; charset=utf-8',
            async: false,
            xhrFields: {
                withCredentials: true,
                crossDomain: true,
                Authorization: "Bearer ...."
            },

            method: 'POST',

            data: JSON.stringify( request ),
            success: function (data) {
                console.log(data);
            }
        });

contentType: 'text / plain; charset = utf-8 'lub po prostu contentType:' text / plain ', działa dla mnie! pozdrowienia!!