Προσπαθώ να αντλήσω κάποια δεδομένα από το REST API της HP Alm. Λειτουργεί αρκετά καλά με ένα μικρό σενάριο curl - παίρνω τα δεδομένα μου.
Τώρα, το να το κάνω αυτό με JavaScript, fetch και ES6 (λίγο πολύ) φαίνεται να είναι μεγαλύτερο πρόβλημα. Συνεχίζω να λαμβάνω αυτό το μήνυμα σφάλματος:
Fetch API cannot load
περάσει τον έλεγχο ελέγχου πρόσβασης: Δεν υπάρχει επικεφαλίδα 'Access-Control-Allow-Origin' υπάρχει στον αιτούμενο πόρο. Προέλευση 'http://127.0.0.1:3000' είναι επομένως δεν επιτρέπεται η πρόσβαση. Η απόκριση είχε κωδικό κατάστασης HTTP 501. Εάν μια αδιαφανής απάντηση εξυπηρετεί τις ανάγκες σας, ορίστε τη λειτουργία της αίτησης's σε 'no-cors' για να λάβετε τον πόρο με απενεργοποιημένο CORS.
Καταλαβαίνω ότι αυτό συμβαίνει επειδή προσπαθώ να φέρω τα δεδομένα αυτά από το localhost μου και η λύση θα έπρεπε να είναι η χρήση CORS. Τώρα νόμιζα ότι όντως το έκανα αυτό, αλλά κατά κάποιο τρόπο είτε αγνοεί αυτό που γράφω στην επικεφαλίδα είτε το πρόβλημα είναι κάτι άλλο;
Οπότε, υπάρχει κάποιο θέμα υλοποίησης; Μήπως το κάνω λάθος; Δυστυχώς, δεν μπορώ να ελέγξω τα αρχεία καταγραφής του διακομιστή. Είμαι πραγματικά λίγο κολλημένος εδώ.
function performSignIn() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');
headers.append('GET', 'POST', 'OPTIONS');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(sign_in, {
//mode: 'no-cors',
credentials: 'include',
method: 'POST',
headers: headers
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log('Authorization failed : ' + error.message));
}
Χρησιμοποιώ τον Chrome. Δοκίμασα επίσης να χρησιμοποιήσω αυτό το Chrome CORS Plugin, αλλά τότε λαμβάνω ένα άλλο μήνυμα σφάλματος:
Η τιμή της επικεφαλίδας 'Access-Control-Allow-Origin' στην απόκριση
δεν πρέπει να είναι ο μπαλαντέρ '*' όταν η λειτουργία διαπιστευτηρίων της αίτησης'είναι 'include'. Συνεπώς, δεν επιτρέπεται η προέλευση 'http://127.0.0.1:3000' πρόσβαση. Η λειτουργία διαπιστευτηρίων των αιτήσεων που ξεκινούν από το XMLHttpRequest ελέγχεται από το χαρακτηριστικό withCredentials.
Αυτή η απάντηση καλύπτει πολλά θέματα, γι' αυτό χωρίζεται σε τρία μέρη:
Πώς να χρησιμοποιήσετε έναν μεσάζοντα CORS για να παρακάμψετε τα προβλήματα "No Access-Control-Allow-Origin header " Εάν δεν ελέγχετε τον διακομιστή στον οποίο ο κώδικας JavaScript του frontend σας στέλνει μια αίτηση και το πρόβλημα με την απάντηση από αυτόν τον διακομιστή είναι απλώς η έλλειψη της απαραίτητης επικεφαλίδας "Access-Control-Allow-Origin", μπορείτε να κάνετε τα πράγματα να λειτουργήσουν - κάνοντας την αίτηση μέσω ενός CORS proxy. Για να δείξουμε πώς λειτουργεί αυτό, πρώτα παραθέτουμε κάποιο κώδικα που δεν χρησιμοποιεί μεσάζοντα CORS: