web-dev-qa-db-fra.com

Comment créer une requête interdomaine?

Comment créer une requête interdomaine avec Angular 2?

Pouvez vous donner un exemple?
Comme une requête entre localhost: 3000 et localhost: 8000 entre domaines

angularhttpcorscross-domain
47
Ignat

En fait, il n’ya rien à faire dans Angular2 en ce qui concerne les requêtes entre domaines. CORS est quelque chose nativement supporté par les navigateurs. Ce lien pourrait vous aider à comprendre comment cela fonctionne:

Pour être bref, dans le cas d'une requête interdomaine, le navigateur ajoute automatiquement un en-tête Origin dans la requête. Il y a deux cas:

  • Requêtes simples. Ce cas d'utilisation s'applique si nous utilisons les méthodes HTTP GET, HEAD et POST. Dans le cas des méthodes POST, seuls les types de contenu avec les valeurs suivantes sont pris en charge: text/plain, application/x-www-form-urlencoded et multipart/form-data.
  • Demandes en amont. Lorsque le cas d'utilisation "demandes simples" ne s'applique pas, une première demande (avec la méthode HTTP OPTIONS) est effectuée pour vérifier ce qui peut être fait dans le contexte de demandes interdomaines.

En fait, la plupart du travail doit donc être effectué côté serveur pour renvoyer les en-têtes CORS. Le principal est le Access-Control-Allow-Origin.

200 OK HTTP/1.1
(...)
Access-Control-Allow-Origin: *

Pour déboguer de tels problèmes, vous pouvez utiliser les outils de développement dans les navigateurs (onglet Réseau).

En ce qui concerne Angular2, utilisez simplement l’objet Http comme toute autre requête (même domaine par exemple):

return this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json()).subscribe(
  ...
);
40
Thierry Templier

Pour moi c'était un autre problème. Cela peut sembler trivial pour certains, mais cela m'a pris du temps à comprendre. Donc, cette réponse pourrait être utile à certains.

J'avais mon API_BASE_URL réglé sur localhost:58577. La pièce est tombée après avoir lu le message d'erreur pour la millionième fois. Le problème est dans la partie où il est dit qu'il ne supporte que HTTP et quelques autres protocoles. J'ai dû changer le API_BASE_URL pour qu'il inclue le protocole. Donc, changer API_BASE_URL pour http://localhost:58577 cela a fonctionné parfaitement.

16
larzz11

Ce n'est rien que vous puissiez faire côté client . J'ai ajouté @CrossOrigin dans le contrôleur côté serveur et cela fonctionne.

@RestController
@CrossOrigin(origins = "*")
public class MyController

Veuillez vous référer à docs .

Lin

8
Lin W

D'après mon expérience, les plugins fonctionnaient avec http mais pas avec le dernier httpClient. En outre, la configuration des en-têtes de réponse CORS sur le serveur n'était pas vraiment une option. J'ai donc créé un fichier proxy.conf.json pour agir en tant que serveur proxy.

Plus d'informations à ce sujet ici: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

ci-dessous est mon fichier prox.conf.json

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

J'ai placé le fichier proxy.conf.json juste à côté du fichier package.json dans le même répertoire

alors j'ai modifié la commande de démarrage dans le fichier package.json comme ci-dessous

"start": "ng serve --proxy-config proxy.conf.json"

maintenant, l'appel http de mon composant d'application est le suivant

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Enfin, pour exécuter mon application, je devrais utiliser npm start ou ng serve --proxy-config proxy.conf.json.

4
rgantla

L'un des moyens d'activer la requête interdomaine sur le navigateur chrome local:

  1. Créer un raccourci de Google Chrome.
  2. Propriétés -> ajouter "--disable-web-security --user-data-dir" à la fin de la cible.
  3. Fermez ou tuez tous les processus de Google Chrome.
  4. Redémarrez et cliquez sur l'URL de l'interface utilisateur. 

Désormais, l’UI et l’API fonctionnant sur différents ports pourront fonctionner ensemble. J'espère que ça aide.

Si vous cherchez un exemple de requête interdomaine ... je le mettrai en fragments pour vous donner une idée assez précise.

Client angulaire

user.service.ts pour appeler le SpringWebservice.

 /** POST: Validates a user for login from Spring webservice */
      loginUrl = 'http://localhost:8091/SpringWebService/login';  // URL to web api

     validUser (user: User): Observable<User> {
        return this.http.post<User>(this.loginUrl, user, httpOptions)
       .pipe(
           catchError(this.handleError('Login User', user))
  );
}

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json;charset=utf-8',
    'Authorization': 'my-auth-token'
  })
};

login.component.html: pour accepter le nom d'utilisateur et le mot de passe.

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">
    <!-- //ngModel is a must for each form-control  -->
  <!-- 1st group -->
  <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" 
                required name="name"  ngModel #name="ngModel"> 

        <div [hidden]="name.valid || name.pristine"
                class="alert alert-danger">
             Name is required
        </div>
  </div> 
  <!-- 2nd group -->
  <div class="form-group">
      <label for="pwd">Password</label>
      <input type="text" class="form-control" id="pwd"
            name="pwd" #pwd required ngModel>
  </div>   

  <button type="submit" class="btn btn-success" [disabled]="!loginForm.valid">Submit</button>

</form>

login.component.ts: appelle et souscrit la méthode validUser de user.service.

userModel : User;
onSubmit(loginForm : NgForm) { 
this.submitted = true; 
console.log("User : "+loginForm.value.name + " Valid :"+loginForm.valid)

this.userModel.loggedIn= false;
this.userModel=new 
User(loginForm.value.name.trim(),loginForm.value.pwd.trim())
// Passing the userModel to Service method to invoke WebAPI
this.userService.validUser(this.userModel).subscribe(user=>
    {
      if(user.loggedIn == false){
        console.log("Invalid User/PWD");

       }
      else{
        this.userService.changeUser(this.userModel);
        this.router.navigate(['/home']);
      }
  }
);

user.ts: modèle.

export class User {

constructor(
    public  name : String,
    public  pwd : String,
    public  email ?: String, //optional
    public  mobile ? : number,//""
    public  loggedIn : boolean = false
){  }
}

Spring Webservice.

package com.rest;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
// This annotation opens door for cross-domain(Cross-Origin resource sharing (CORS)) from any Host
@CrossOrigin(origins="*") 
public class MainController {

     @RequestMapping(value="/login", method=RequestMethod.POST)
     public User validUser(@RequestBody User user){


         BaseResponse response = new BaseResponse();

         if(user.getName().equalsIgnoreCase("shaz") && user.getPwd().equals("pwd")){

             user.setLoggedIn(true);
         }
         else{

             user.setLoggedIn(false);

         }
         return user;

     }
}

Désormais, lorsque vous transmettez name en tant que "shaz" et pwd en tant que "pwd" dans le formulaire et que vous appuyez sur envoyer, le contenu est validé à partir de SpringWebService et l'indicateurlogIn est défini sur true et l'entité utilisateur est renvoyée en réponse. En fonction du statut connecté de la réponse, l'utilisateur est redirigé vers la page d'accueil ou une erreur est générée.

Page de connexion et détails du réseau Login Page

 Network details

Note: Je n'ai pas partagé la configuration complète et le code

Reportez-vous à ceci: https://shahbaazdesk.wordpress.com/2018/04/03/angular5-with-spring-webservice/

0
Shahbaaz Khan
@RestController
@RequestMapping(value = "/profile")
@CrossOrigin(origins="*")
public class UserProfileController {

SpringREST fournit @CrossOrigin annotations où (origins = "*") autorise l'accès à REST APIS depuis n'importe quelle source.

Nous pouvons l'ajouter à l'API respective ou à RestController en entier.

0
Harsh Maheswari