it-swarm.com.de

Wie erstelle ich eine domänenübergreifende Anfrage?

Wie erstelle ich eine domänenübergreifende Anfrage mit Angular 2?

Kannst du ein Beispiel geben?
Wie eine Anfrage zwischen localhost: 3000 und localhost: 8000 domänenübergreifend

47
Ignat

Tatsächlich gibt es in Angular2 nichts zu tun, was domänenübergreifende Anforderungen betrifft. CORS wird von Browsern nativ unterstützt. Dieser Link kann Ihnen helfen zu verstehen, wie es funktioniert:

Kurz gesagt, bei einer domänenübergreifenden Anforderung fügt der Browser der Anforderung automatisch einen Origin-Header hinzu. Es gibt zwei Fälle:

  • Einfache Anfragen. Dieser Anwendungsfall gilt, wenn wir die Methoden HTTP GET, HEAD und POST verwenden. Bei POST - Methoden werden nur Inhaltstypen mit den folgenden Werten unterstützt: text/plain, application/x-www-form-urlencoded und multipart/form-data.
  • Preflight-Anforderungen. Wenn der Anwendungsfall "einfache Anforderungen" nicht zutrifft, wird eine erste Anforderung (mit der Methode HTTP OPTIONS) durchgeführt, um zu prüfen, was im Kontext von domänenübergreifenden Anforderungen ausgeführt werden kann.

In der Tat muss die meiste Arbeit auf der Serverseite geleistet werden, um die CORS-Header zurückzugeben. Der Hauptcode ist der Access-Control-Allow-Origin.

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

Um diese Probleme zu beheben, können Sie in Browsern (Registerkarte "Netzwerk") Entwicklertools verwenden.

In Bezug auf Angular2 verwenden Sie einfach das Http-Objekt wie alle anderen Anforderungen (zum Beispiel dieselbe Domäne):

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

Für mich war das ein weiteres Problem. Für manche ist das vielleicht trivial, aber ich habe eine Weile gebraucht, um es herauszufinden. Diese Antwort könnte für einige hilfreich sein.

Ich hatte mein API_BASE_URL auf localhost:58577 gesetzt. Die Münze fiel nach dem Lesen der Fehlermeldung zum millionsten Mal. Das Problem liegt in dem Teil, in dem es heißt, dass es nur HTTP und einige andere Protokolle unterstützt. Ich musste API_BASE_URL so ändern, dass es das Protokoll enthält. Das Ändern von API_BASE_URL in http://localhost:58577 hat perfekt funktioniert.

16
larzz11

Es ist nichts, was Sie auf der Clientseite tun können ... Ich habe @CrossOrigin im Controller auf der Serverseite hinzugefügt, und es funktioniert.

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

Bitte beziehen Sie sich auf docs .

Lin

8
Lin W

Nach meiner Erfahrung funktionierten die Plugins mit http, aber nicht mit dem neuesten httpClient. Auch das Konfigurieren der CORS-Respsonse-Header auf dem Server war keine Option. Also habe ich eine proxy.conf.json-Datei erstellt, die als Proxy-Server fungiert.

Weitere Informationen hierzu finden Sie hier: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

unten ist meine prox.conf.json-Datei

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

Ich habe die Datei proxy.conf.json direkt neben der Datei package.json im selben Verzeichnis abgelegt.

Dann habe ich den Startbefehl in der package.json-Datei wie folgt geändert

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

der http-Aufruf von meiner App-Komponente lautet nun wie folgt

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

Um meine App auszuführen, muss ich npm start oder ng serv verwenden --proxy-config proxy.conf.json

4
rgantla

Eine Möglichkeit, domänenübergreifende Anforderungen im lokalen Chrome-Browser zu aktivieren:

  1. Erstellen Sie eine Abkürzung für Google Chrome.
  2. Eigenschaften -> "--disable-web-security --user-data-dir" am Ende des Ziels anhängen.
  3. Schließen oder beenden Sie den gesamten Prozess von Google Chrome.
  4. Starten Sie neu und klicken Sie auf die UI-URL. 

Jetzt können Benutzeroberfläche und API, die auf verschiedenen Ports ausgeführt werden, zusammenarbeiten. Ich hoffe das hilft.

Wenn Sie nach einem Beispiel für eine domänenübergreifende Anfrage suchen ... Ich werde es in Fragmente einfügen, damit Sie genügend Idee bekommen.

Angular Client

user.service.ts, um den SpringWebservice aufzurufen.

 /** 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: um den Benutzernamen und das Kennwort zu akzeptieren.

<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: Ruft die validUser-Methode von user.service auf und abonniert diese.

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: Modell.

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;

     }
}

Wenn Sie nun den Namen als "shaz" und pwd als "pwd" im Formular übergeben und auf "Senden" klicken, wird dies vom SpringWebService bestätigt, und das Flag loginIn wird auf "true" gesetzt und die Benutzerentität wird als Antwort zurückgegeben. Basierend auf dem Status der protokollierten Eingaben aus der Antwort wird der Benutzer zur Startseite umgeleitet oder es wird ein Fehler ausgegeben.

Anmeldeseite und Netzwerkdetails Login Page

 Network details

Hinweis: Ich habe das vollständige Setup und den Code nicht geteilt

Siehe hierzu: https://shahbaazdesk.wordpress.com/2018/04/03/angular5-with-spring-webservice/

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

SpringREST bietet @CrossOrigin -Anmerkungen, wobei (origins = "*") / den Zugriff auf REST APIS von einer beliebigen Quelle aus erlaubt.

Wir können es der jeweiligen API oder dem gesamten RestController hinzufügen.

0
Harsh Maheswari