Utilisation de l'API Asqatasun avec Javascript (en front, pas Node.js)

Bonjour !
J’ai installé le serveur d’API Asqatasun en utilisant l’image docker api-5.0.0-rc.1_ubuntu-18.04.

Ca fonctionne nickel avec curl (en reprenant l’exemple de la doc). Ca me retourne bien “1”.

J’ai fait un petit test javascript, mais j’ai une erreur 401 (Unauthorized) :

Access to fetch at 'http://localhost:8986/api/v1/audit/run' from origin 'http://mytestapp.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Problème de CORS…

Voici mon code :

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Test Asqatasun API</title>
		<script src="index.js" type="module"></script>
	</head>
	<body><p>Look at the console!</p></body>
</html>

index.js

// API Credentials
const API_URL = "http://localhost:8986";
const API_USER = "admin@asqatasun.org";
const API_PWD = "myAsqaPassword";
const API_AUDIT_URL = API_URL + "/api/v1/audit/run";
const PROJECT_ID = "1";
const REFERENTIAL = "RGAA_4_0";
const LEVEL = "AA";
const TAGS = [];
/**
 * Fetches an audit
 *
 * @param {string} url URL of the page you want to audit
 *
 * @returns {Promise} A Promise for getting the image URL
 */
function fetchAudit(url) {
	const data = {
		urls: [url],
		referential: REFERENTIAL,
		level: LEVEL,
		contractId: PROJECT_ID,
		tags: TAGS,
	};
	const options = {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
			Authorization: "Basic " + btoa(API_USER + ":" + API_PWD),
		},
		body: JSON.stringify(data),
	};
	console.log(options);
	return fetch(API_AUDIT_URL, options)
		.then((response) => {
			// get the response as a structured JSON
			console.log(response);
			return response.json();
		})
		.catch(function (err) {
			console.log(err);
		});
}
fetchAudit("https://www.wikidata.org");

Est-ce qu’il faut ajouter un header à ma requête… ou bien c’est une autorisation à ajouter côté serveur (via config peut-être ?) ?

Merci pour votre aide !

1 Like

Pour info, j’ai la même erreur 401 quand je tente les “Try it out” depuis Swagger

Bonjour @yaaax et bienvenue sur le Forum !

Pour compléter les échanges sur Element.io, tu nous précises donc exécuter ce code directement dans une page HTML. Ça flaire les restrictions (légitimes) du navigateur. Aurais-tu un Firefox Nightly sous la main pour tester ? (tout est dans le Nightly, qui débrayent pas mal de restrictions, et s’avère fort utile en mode dev)

Merci @mfaure,
Je n’ai pas (encore) de version Nightly, mais je peux la télécharger.

Pour swagger, je retire mon dernier commentaire : l’appel de l’API auditPage (/api/v1/audit/run) fonctionne. Mais je vois que c’est curl qui est appelé, donc je ne suis pas étonné.

Pareil sur la version Nightly. Un message un peu différent sur Firefox :

XHR OPTIONS http://mytestapp.test:8986/api/v1/audit/run
CORS Preflight Did Not Succeed

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mytestapp.test:8986/api/v1/audit/run. (Reason: CORS preflight response did not succeed).

  • je reproduit ce problème dans une page HTML affichée dans un navigateur
  • aucun soucis avec ce code JS en utilisant nodejs

C’est un blocage du navigateur lié au CORS