web-dev-qa-db-ja.com

Angular CORSリクエストがブロックされました

Angular app with a simple REST server on express。the server only send json data in reply to request to request。 CORSサポートを追加するために、npmのcorsモジュールを使用しました。Angularアプリでは、この手順に従ってHttpHeadersを追加しました質問： ブロックされたAngular CORSリクエスト 。

これが、corsオプションを設定したエクスプレスコードです。`

_// async CORS setup delegation
function corsOptsDelegator(req, cb) {
    let opts = {},
        Origin = req.header('Origin');
    if(imports.allowedOrigins.indexOf(Origin) === 1) opts.Origin = true;
    else opts.Origin = false;
    opts.optionsSuccessStatus = 200;
    opts.methods = ['POST', 'GET']; // allowed methods
    opts.credentials = true; // for passing/setting cookie 
    opts.allowedHeaders = ['Content-Type', 'Accept', 'Access-Control-Allow-Origin']; // restrict headers 
    opts.exposedHeaders = ['Accept', 'Content-Type']; // for exposing custom headers to clients; use for hash
    cb(null, opts);
}
`
_

これをグローバルgetハンドラーに追加する方法を次に示します。

_`
app.get('/', cors(corsOptsDelegator), (res, req, nxt) => {
    // only for adding cors on all requests
    nxt();
});
`
_

Angularサービスを設定する方法は次のとおりです。

`

_export class ContentGetterService {

  private root: string;
  private corsHeaders: HttpHeaders;
  //private contents: string;

  constructor(private http: HttpClient) {
    this.root = 'http://localhost:8888';
    this.corsHeaders = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Origin': 'http://localhost:4200'
    });
    //this.contents = '';
   }

  getContent(subs: Array<string>): Observable<IContent> {
    return (() => {
      return this.http.get<IContent>( (() => {
        let r = this.root;
        subs.forEach((s, i, a) => {
          if(i === a.length-1) {
            r += s;
          }
          else {
            if(s !== '/') {
              r += s;
            }
          }
        });
        return r;
      })(), {
        headers: this.corsHeaders
      });

    })();
  }
  }
_

ブラウザの警告：Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8888/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

ありがとう。

angularexpresscors
6
Abrar Hossain

このコードを使用して、構造に従って自分を管理します。

app.use(
    cors({ 
        Origin: http://localhost:4200, 
        methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
        allowedHeaders: [
            'Content-Type', 
            'Authorization', 
            'Origin', 
            'x-access-token', 
            'XSRF-TOKEN'
        ], 
        preflightContinue: false 
    })
);

app.get('/', (res, req, nxt) => {
    // only for adding cors on all requests
    nxt();
});

On Angular Side

constructor(private http: HttpClient) {
  this.root = 'http://localhost:8888';  //remove
  this.corsHeaders = new HttpHeaders({
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Access-Control-Allow-Origin': '/' .  // edit 
  });
  //this.contents = '';
 }

<base> index.html

0
Chandan Kumar

angular JSからアクセスするサーバー側を許可します。その場合、http://localhost:8888/がサーバー側のURLであるため、許可する必要がありますangular run http://localhost:4200 ..をチェックしてください。

0
Chandan Kumar

開発環境（localhost）では、これらのハードステップを実行せずに簡単に実行できます。ダウンロードするだけです https://addons.mozilla.org/firefox/addon/cors-everywhere/ if ifあなたはFirefoxを使用していて、chromeの拡張機能も必要だと思います。ダウンロード後、Firefoxのメニューバーに表示され、クリックしてアクティブ化できます。これでアクセスできます。すべてのリクエストでヘッダーを自動的に送信するため、すべてのAPIに送信します。本番環境では、*（all）にaccess-control-allow-Originを追加して、サーバーから設定する必要があります。

0
vivek rautela