web-dev-qa-db-ja.com

クロスドメインリクエストの作成方法

Angular 2を使用してクロスドメインリクエストを作成する方法

例を挙げていただけますか？
クロスドメインlocalhost：3000とlocalhost：8000の間のリクエストのように

angularhttpcorscross-domain
49
Ignat

実際、Angular2ではクロスドメインリクエストに関して何もすることはありません。 CORSはブラウザによってネイティブにサポートされているものです。このリンクは、その仕組みを理解するのに役立ちます。

簡単に言うと、クロスドメインリクエストの場合、ブラウザはOriginヘッダーをリクエストに自動的に追加します。次の2つの場合があります。

  • 単純なリクエスト。この使用例は、HTTP GET、HEADおよびPOSTメソッドを使用する場合に適用されます。 POSTメソッドの場合、次の値を持つコンテンツタイプのみがサポートされます：text/plain、application/x-www-form-urlencoded、およびmultipart/form-data。
  • プリフライトされたリクエスト。 「シンプルリクエスト」のユースケースが適用されない場合、クロスドメインリクエストのコンテキストで何ができるかを確認するために、最初のリクエスト（HTTP OPTIONSメソッドを使用）が行われます。

実際、CORSヘッダーを返すには、サーバー側でほとんどの作業を行う必要があります。主なものはAccess-Control-Allow-Originのものです。

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

このような問題をデバッグするには、ブラウザー内の開発者ツールを使用できます（[ネットワーク]タブ）。

Angular2については、他のリクエストと同じHttpオブジェクトを使用するだけです（たとえば、同じドメイン）。

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

私にとっては別の問題でした。これは一部の人にとっては些細なことかもしれませんが、理解するにはしばらく時間がかかりました。したがって、この答えは一部の人にとって役立つかもしれません。

API_BASE_URLをlocalhost:58577に設定しました。 100万回目のエラーメッセージの読み取り後にコインが落下しました。問題は、HTTPおよびその他のプロトコルのみをサポートしていると言っている部分にあります。プロトコルが含まれるように、API_BASE_URLを変更する必要がありました。 API_BASE_URLをhttp://localhost:58577に変更すると、完全に機能しました。

16
larzz11

クライアント側でできることは何もありません。サーバー側のコントローラーに@CrossOriginを追加しましたが、動作します。

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

docs を参照してください。

林

8
Lin W

私の経験では、プラグインはhttpで機能しましたが、最新のhttpClientでは機能しませんでした。また、サーバー上でCORS応答ヘッダーを構成することは、実際にはオプションではありませんでした。そこで、プロキシサーバーとして機能するproxy.conf.jsonファイルを作成しました。

詳細については、こちらをご覧ください： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

以下は私のprox.conf.jsonファイルです

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

proxy.conf.jsonファイルを同じディレクトリ内のpackage.jsonファイルのすぐ隣に配置しました

次に、package.jsonファイルのstartコマンドを次のように変更しました

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

今、私のアプリコンポーネントからのhttp呼び出しは次のとおりです

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

最後にアプリを実行するには、npm startまたはng serve --proxy-config proxyを使用する必要があります.conf.json

5
rgantla

ローカルchromeブラウザでクロスドメインリクエストを有効にする方法の1つ：

  1. Google Chromeのショートカットを作成します。
  2. プロパティ->ターゲットの最後に「--disable-web-security --user-data-dir」を追加します。
  3. Google Chromeのすべてのプロセスを閉じるか、強制終了します。
  4. 再起動して、UIのURLにアクセスします。

これで、異なるポートで実行されているUIとAPIが連携して機能するようになります。これがお役に立てば幸いです。

クロスドメインリクエストの例を探している場合。十分なアイデアが得られるように、断片化していきます。

Angular Client

user.service.tsSpringWebserviceを呼び出します。

 /** 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：ユーザー名とパスワードを受け入れます。

<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：user.serviceのvalidUserメソッドを呼び出してサブスクライブします。

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：モデル。

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;

     }
}

フォームで名前を「shaz」として、「pwd」を「pwd」としてフォームに渡し、submitを押すと、SpringWebServiceから検証され、loggedInフラグがtrueに設定され、ユーザーエンティティが応答で返されます。応答のloggedInステータスに基づいて、ユーザーはホームページにリダイレクトされるか、エラーがスローされます。

ログインページとネットワークの詳細Login Page

Network details

注：完全なセットアップとコードを共有していません

これを参照してください： https://shahbaazdesk.wordpress.com/2018/04/03/angular5-with-spring-webservice/

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

SpringRESTは@ CrossOrigin注釈を提供します。ここで（ori​​gin = "*"）は任意のソースからREST AP​​ISへのアクセスを許可します。

それぞれのAPIまたはRestController全体に追加できます。

0
Harsh Maheswari