web-dev-qa-db-ja.com

Angular 7アプリがangular clientからCORSエラーを取得

エクスプレスバックエンドでangular 7アプリを開発しました。localhost:3000およびangularクライアントはlocalhost：4200で実行されています。

の中に server.js持っている（コード全体ではない）

const app = express();
// Enable CORS
app.use(cors());
// Get our API routes
const api = require('./api');
// Set our api routes
app.use('/api', api);
app.use(express.static(__dirname + '/dist/sfdc-event'));

Api.jsファイルには、アクセストークンを送信してユーザーを認証する https://example.com にリダイレクトするrouter.get（ '/ oauth2/login'）があります（OAuth2認証） 。

URLを呼び出しているとき http：// localhost：3000/api/oauth2/login すべてが正常に機能していますが、同じことをangular = component.ts-> service.ts次のエラーが表示されます。

クロスオリジンリクエストがブロックされました：同じオリジンポリシーがリモートリソースの読み取りを許可していません理由：CORSヘッダー「Access-Control-Allow-Origin」がありません

Http。getを実行するサービスapi.service.tsを呼び出すボタンがあるlogin.component.tsに続く角度付きアプリフロー。

login.component.ts

sfdcLogin(): void {
  console.log('DEBUG: LoginComponent: ', 'Login button clicked..');
 this.apiService.login().subscribe( data => { console.log( data ); });
}

api.service.ts

login() {
  console.log('DEBUG: APiService login(): ', 'login() function.');
  const URL = 'oauth2/login';
  console.log('DEBUG: ApiService login URL : ', `${environment.baseUrl}/${URL}`.toString());
  return this.http.get(`${environment.baseUrl}/${URL}`)
    .pipe( map( res => res ));
}

誰かがエラーを乗り越えるのを手伝ってくれますか？私はa）CORS b）server.jsから静的ファイルを提供しています

app.use(express.static(__dirname + '/dist/sfdc-event'));

c）動的環境変数。他に何が欠けていますか？

node.jsangularexpresscorsangular7
8
Arup Sarkar

Angular 7の場合、他の実装を行う必要があります。angularドキュメンテーションから、proxy.jsファイルを作成する必要があります。

https://angular.io/guide/build#using-corporate-proxy

独自のバックエンドサーバーのパスを編集します。

proxy.js：

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];

function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

後でこれをpackage.jsonに追加します

"start": "ng serve --proxy-config proxy.js"

これを次のように呼び出します：

npm start

そして、app.jsに以下を追加するだけです：

const cors = require("cors");
app.use(cors());

私は同じ問題を抱えていて、それが私の問題を解決しました。私はそれが役立つことを願っています！

6
Freestyle09

サーバー側でAngular cliおよび。net Frameworkを使用しています。

この問題を解決するには、次の手順を使用して、サーバー側でCORS対話を有効にします。

  1. Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6

    そして、WebApiConfigクラスに：

  2. 追加 using System.Web.Http.Cors;

  3. 内部Register（HttpConfiguration config）メソッド：

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");

config.EnableCors(cors);

または

var cors = new EnableCorsAttribute("*", "*", "*"); //Origin, headers, methods

config.EnableCors(cors);
2
David Q

http://localhost:4200/apiのすべての呼び出しをhttp://localhost:3000/apiで実行されているサーバーに転送するには、 following ステップを実行します。

  1. Package.jsonの隣にあるプロジェクトのsrc /フォルダーにproxy.conf.jsonファイルを作成します。

  2. 次のコンテンツを新しいプロキシファイルに追加します。

    {"/ api"：{"target"： "http://localhost:3000"、 "secure"：false}}

  3. CLI構成ファイル、angular.jsonで、proxyConfigオプションをサーバーターゲットに追加します。

    ... "architect"：{"serve"：{"builder"： "@ angular-devkit/build-angular：dev-server"、 "options"：{"browserTarget"： "your-application-name：build" 、 "proxyConfig"： "src/proxy.conf.json"}、...

  4. このプロキシ設定で開発サーバーを実行するには、ng serveを呼び出します。

2
TiyebM

これが開発専用の場合は、angular-cliに付属のプロキシを使用することをお勧めします。 proxy.jsonというファイルを作成します

そして

{
  "/api/oauth2/login": {
    "target": "http://localhost:3000/api/oauth2/login",
    "secure": false
  }
}

呼び出しng serve --proxy-config proxy.json。これがまだ本番環境で問題になると予想される場合は、より大きな会話が必要です。

完全なドキュメント： https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

また、CORSとは何ですか： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

1
piotr szybicki

CORSの問題を回避するためにコールバックメカニズムを変更しました。ユーザーが https://example.com から認証を受けるためにOAuthフローを利用しています。 https://example.com/auth/callback にリダイレクトしていましたが、 http：// localhost：4200 その後、コールバックURLをサーバー http：// localhost：3000 に送信すると、CORSエラーが発生していました。

今、私はそれをクライアント http：// localhost：4200 にリダイレクトし、CORSの問題を乗り越えました。 GET、POST、DELETE、PATCHに対する他のすべての呼び出しは、 http：// localhost：3000 からのものであり、正常に動作しています。

ご意見ありがとうございます。

1
Arup Sarkar

angularアプリは4200ポートで実行され、バックエンドは3000ポートで実行されているため、両方のアプリケーションのオリジンは異なります。

この問題を解決するには、マシンで「nginx」をセットアップします。

これにより、angularおよびバックエンドからのすべてのリクエストが「nginx」サーバー経由で送信されます。したがって、CORSの問題が解決されます。

0
Saddam Pojee

これはすでに回答済みですが、CORSの問題を探している人には役立つかもしれません。以下の3つの手順に従って、この問題を解決できます。 1. proxy.conf.jsonファイルを作成し、アプリのルートレベルに配置します。 2. package.jsonファイルで、ngstart 3にプロキシパラメーターを追加します。angular.jsonで、プロキシファイルエントリを追加します。 4.すべての残りの呼び出しを/ api/getDataなどに変更します。

完全なステップバイステップのチュートリアルはこちらです。 http://www.codeyourthought.com/angular/proxy-to-make-http-call-in-angular/

0
Ankit21ks