@ vue / cliクロスドメイン方式とExpressの組み合わせ

この方法は、本番
　　環境ではなく、開発に適しています1. @ vue / cli build vue

@ vue / cli build vueプロジェクト前の記事で

2.　　エクスプレスビルドバックグラウンドノードプログラムを紹介しました（ノードのインストールが完了していることを確認してください）

npm install express // install express 

npm install express-generator -g // expressプラグインモジュールexpress scaffolding

express myapp //新しいプロジェクトを作成しますmyapp 

cd myapp //新しいプロジェクトを入力します

npm install //新しいプロジェクトをインストールします

npm startに依存します//プロジェクトを開始しますdefault access localhost：3000 bin構成ファイル構成を確認できるポート番号を開きます

　　プロジェクトの構造

app.jsを開く

これはデフォルトのテンプレートエンジンであり、htmlに変更できます。

またはejsがダウンロードする

$ npm install --save ejs

bin：　　ファイルの開始、ファイルの開始方法、デフォルトはnpm start
public：　　プロジェクトの静的ファイルの格納、imagea / js / cssおよびその他のファイル
ルート：　　プロジェクトのルーティング情報、制御アドレスのルーティング
ビュー：　　ファイルの表示、テンプレートファイルjade、 html
app.jsに 相当：　　エントリファイル（メインファイル）
package.json：　　依存テンプレートのリスト

3.　バックグラウンドインターフェースを作成するフロントデスクでリクエストを送信する

インターフェース

app.get（ "/ test"、function （req、res）{ 
    res.json（{ "haha"： "Hello I am a test" }）; 
}）;

フォアグラウンドのvueファイルへのリクエストをhttp：// localhost：3000 / testに送信します

エラーはクロスドメインの問題が原因です

4.クロスドメイン（重要）バックグラウンドプログラムエクスプレスを解決する

npm install request //より良い操作のためのインストール要求http

app.jsヘッダーにリクエストを導入する

var request = require（ 'request'）;

次に重要なステップ

npm install cors //クロスドメインを解決するためにcorsをインストールする

設定変更app.js　　

+ var cors require（ " 
cors "）; + app.use（cors（{ 
　　　　origin：['http：// localhost：8080']、//このドメイン名の
　　　　メソッドでリクエストを許可：["GET"、 "POST" ]、//許可されるリクエストタイプ
　　　　allowHeaders：['Conten-Type'、 'Authorization'] //リクエストヘッダー
　　}））;

次に、プロジェクトを再起動し、フロントエンドプロジェクトを開いて、リクエストが成功したことを確認します

現時点では完了していますが、問題はリクエストされたアドレスがすべてhttp：// localhost：3000であることです。

したがって、requestを使用して、本当にリクエストしたいアドレスにリクエストを転送します

インターフェイス/テストファイルにコードを追加する

var request = require（ "request"）;

/ *ユーザーリストを取得します。* /
router.get（ '/'、function（req、res、next）{
+ let url = "http：// localhost：8080 / user / a";
+ request（url、function（err、response、body） {
+ if（！err && response.statusCode == 200）{
+ let data = JSON.parse（response.body）;
+ res.json（data）;
+}
　　　　}）;
}）;

@ vue / cliクロスドメイン方式とExpressの組み合わせ

おすすめ