Stworzyłem demo przy użyciu JavaScript dla interfejsu API wyszukiwania zdjęć Flickr. Teraz konwertuję go na AngularJs. Przeszukałem internet i znalazłem poniżej konfigurację.
Konfiguracja:
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Usługa:
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.flickrPhotoSearch = function() {
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
dataType: 'jsonp',
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
});
}
});
Kontroler:
myApp.controller('flickrController', function($scope, dataService) {
$scope.data = null;
dataService.flickrPhotoSearch().then(function(dataResponse) {
$scope.data = dataResponse;
console.log($scope.data);
});
});
Ale nadal mam ten sam błąd. Oto kilka linków, które wypróbowałem:
javascript
angularjs
xmlhttprequest
cors
ankitr
źródło
źródło
Odpowiedzi:
Ty nie. Serwer, do którego wysyłasz żądanie, musi zaimplementować mechanizm CORS, aby przyznać dostęp JavaScript do Twojej witryny. Twój JavaScript nie może przyznać sobie uprawnień dostępu do innej witryny.
źródło
https://www.google.com
wykorzystaniem aplikacji takich jak listonosz, ale przy próbieGET
zhttps://www.google.com
użyciem wywołanie AJAX pojawia się błąd CORS? Czy nie ma sposobu, aby wywołanie AJAX zachowywało się podobnie do wywołania z programu POSTMAN?Miałem podobny problem i jak dla mnie sprowadzało się to do dodania następujących nagłówków HTTP w odpowiedzi strony odbierającej :
Możesz wolisz nie używać
*
na końcu, a jedynie nazwę domeny hosta wysyłającego dane. Lubić*.example.com
Ale jest to możliwe tylko wtedy, gdy masz dostęp do konfiguracji serwera.
źródło
header('Access-Control-Allow-Origin: *');
Http.get()
lub podobnego, dodajheader('Access-Control-Allow-Origin: *')
jako pierwsze wyjście w wywołanym skrypcie PHP (tj. ZanimSpróbuj skorzystać z usługi zasobów, aby wykorzystać flickr jsonp:
Szablon:
źródło
Ten problem występuje z powodu zasady modelu zabezpieczeń aplikacji sieci Web, która ma takie same zasady pochodzenia. Zgodnie z tą zasadą przeglądarka internetowa zezwala skryptom zawartym na pierwszej stronie internetowej na dostęp do danych na drugiej stronie internetowej, ale tylko wtedy, gdy obie strony mają to samo źródło. Oznacza to, że żądający musi dokładnie dopasować hosta, protokół i port żądającej witryny.
Mamy wiele możliwości rozwiązania problemu z nagłówkiem CORS.
Korzystanie z serwera proxy - w tym rozwiązaniu uruchomimy serwer proxy w taki sposób, że gdy żądanie przechodzi przez serwer proxy, będzie wyglądać, jakby pochodziło z tego samego źródła. Jeśli używasz nodeJS można użyć Cors-gdzie zrobić rzeczy proxy. https://www.npmjs.com/package/cors-anywhere .
Przykład : -
JSONP - JSONP to metoda wysyłania danych JSON bez obawy o problemy międzydomenowe, która nie wykorzystuje obiektu XMLHttpRequest,
<script>
zamiast tego używa tagu. https://www.w3schools.com/js/js_json_jsonp.aspServer Side - po stronie serwera musimy włączyć żądań między pochodzenia. Najpierw otrzymamy żądania Preflighted (OPCJE) i musimy zezwolić na żądanie o kodzie stanu 200 (ok).
Żądania z inspekcją wstępną najpierw wysyłają nagłówek żądania HTTP OPTIONS do zasobu w innej domenie, aby określić, czy rzeczywiste żądanie można bezpiecznie wysłać. Żą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 żądanie jest wstępnie sprawdzane, jeśli używa metod innych niż GET 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)
Jeśli używasz sprężyny, wystarczy dodać poniższy kod, aby rozwiązać problem. Tutaj wyłączyłem token csrf, który nie ma znaczenia, włącz / wyłącz zgodnie z twoimi wymaganiami.
Jeśli korzystasz z zabezpieczenia sprężynowego, użyj poniższego kodu wraz z powyższym kodem.
źródło
Napotkałem podobny problem, jak ten, problem dotyczył zaplecza. Używałem serwera węzłowego (Express). Otrzymałem żądanie od frontendu (kątowe), jak pokazano poniżej
Ale dał następujący błąd
To jest kod zaplecza napisany przy użyciu express bez nagłówków
Po dodaniu nagłówka do metody problem został rozwiązany
Możesz uzyskać więcej informacji na temat włączania mechanizmu CORS w Node JS
źródło
Odpowiedziałem przeze mnie.
CORS kątowy js + restEasy on POST
W końcu doszedłem do tego obejścia: Powodem, dla którego zadziałało z IE, jest to, że IE wysyła bezpośrednio POST zamiast najpierw prośby o pozwolenie. Ale nadal nie wiem, dlaczego filtr nie był w stanie zarządzać żądaniem OPTIONS i domyślnie wysyła nagłówki, które nie są opisane w filtrze (wydaje się, że zastąpienie dla tego jedynego przypadku ... może reszta Łatwa rzecz ... .)
Więc utworzyłem ścieżkę OPTIONS w mojej usłudze resztowej, która przepisuje odpowiedź i zawiera nagłówki w odpowiedzi za pomocą nagłówka odpowiedzi
Wciąż szukam prostego sposobu na zrobienie tego, jeśli ktoś wcześniej miał z tym do czynienia.
źródło
Apache / HTTPD zwykle występuje w większości przedsiębiorstw lub jeśli używasz Centos / etc w domu. Więc jeśli masz to w pobliżu, możesz bardzo łatwo zrobić proxy, aby dodać niezbędne nagłówki CORS.
Mam tutaj wpis na blogu na ten temat , ponieważ ostatnio cierpiałem z tym kilka razy. Ale ważne jest po prostu dodanie tego do pliku /etc/httpd/conf/httpd.conf i upewnienie się, że już wykonujesz „Listen 80”:
Gwarantuje to, że wszystkie żądania do adresów URL z twojego-server-ip: 80 / SomePath kierują do http: // target-ip: 8080 / SomePath (API bez obsługi CORS) i wracają z poprawnym Access-Control-Allow- Nagłówek Origin, aby umożliwić im pracę z Twoją aplikacją internetową.
Oczywiście możesz zmienić porty i kierować reklamy na cały serwer zamiast na SomePath, jeśli chcesz.
źródło
W tej odpowiedzi przedstawiono dwa sposoby obejścia interfejsów API, które nie obsługują mechanizmu CORS:
Jednym obejściem jest użycie CORS PROXY:
Więcej informacji znajdziesz w
Użyj JSONP, jeśli obsługuje to API:
DEMO na PLNKR
Więcej informacji znajdziesz w
źródło
źródło
możemy włączyć CORS w interfejsie użytkownika za pomocą modułu ngResourse. Ale co najważniejsze, powinniśmy mieć ten fragment kodu podczas wysyłania żądania Ajax do kontrolera,
Ponadto należy dodać ngResourse CDN w części skryptu i dodać jako zależność w module aplikacji.
Następnie użyj „ngResourse” w sekcji zależności modułu aplikacji
var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);
źródło