2
votes

Demande d'origine croisée bloquée, avec demande de poste angulaire et ressort

J'ai créé un service Angular, c'est un service d'autorisation avec mon propre back-end.

Je dois envoyer un formulaire de données à mon backend, reqData = {"username": "string", "password": " string "}

et quelques en-têtes standard.

Mon composant de connexion.ts

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS header â€˜Access-Control-Allow-Originâ€™ missing).[Learn More]


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS request did not succeed)

Mon authService: p >

signInUser(reqData){
    const headerInfo = new Headers({
                                            'Content-Type': 'text/plain',
                                            'X-TIME-ZONE': '+5.30',
                                            'X-DEVICE-ID': '911422351920594',
                                            'X-APP-VERSION': '45',
                                            'X-APP-CHANNEL-NAME': 'ANDROID',
                                            'X-DEVICE-OS-VERSION': '45',
                                            'X-DEVICE-MODEL': 'ANDROID'
                                            });
    const request = this.http.post('http://server-ip/login', reqData, {headers: headerInfo});

    request.subscribe(
          (response) => console.log('Success' + response),
          (error) => console.log('Error' + error)
    );
}

Je suis en train de vérifier si je suis capable d'envoyer les données.

J'obtiens cette erreur dans le journal:

onSignIn(form: NgForm) {
  const email = form.value.email;
  const password = form.value.password;

  const reqData = {
    'app_uname': email,
    'app_pass': password
  };

  const response = this.authService.signInUser(reqData);
}

Actuellement, mon application Angular est hébergée localement et mon backend sur un autre ordinateur et la communication se fait via le réseau local.

Si j'envoie la même demande dans post-man, cela fonctionne très bien, j'envoie les données de la demande sous forme de données de formulaire: où la clé doit être reqData et la valeur doit être JSON.

Je fais quelque chose ne va pas dans le typographie?

angular spring

0 commentaires

3 Réponses :

1
votes

Vous devez configurer CORS. La politique de même origine bloque votre demande au serveur. Supposons que vous ayez 2 serveurs (example.com et example.org). Un utilisateur visite example.com. La page Web ne peut pas faire de demande à example.org sauf si CORS est activé en raison de la même politique d'origine. lors de l'activation de CORS, la politique de même origine est contournée.

Pour activer CORS, ajoutez un en-tête "Access-Control-Allow-Origin: *".

Je suppose que post-man n'a pas mis en œuvre la même politique d'origine.

0 commentaires

0
votes

Si votre API sert au CORS, vous devez configurer le proxy dans votre projet angulaire essayez de créer un fichier dans votre projet angulaire.

{
    "/your api": {

           "target": "http://your sever:port",

           "secure": false
    },
}

proxy.config.json

lorsque vous utilisez la commande ng serve --proxy-config = proxy.conf.json code > remplacer ng serve

0 commentaires

0
votes

vous devez autoriser la demande de cors car votre client et votre service sont déployés sur un domaine différent. Installez donc cors sur le serveur et permettez au client de se connecter. consultez ceci: - https://www.baeldung.com/spring-cors

0 commentaires