フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出してコンテンツを表示する必要があります。フロントエンドとバックエンドの開発が同じホスト上にある場合、ブラウザの相同性ポリシーの制限により、クロスドメインの問題 (異なるプロトコル、ドメイン名、ポート番号など) が発生し、API インターフェイスを正常に呼び出すことができず、開発に不便が生じます。 APIリクエストのカプセル化 'axios' から axios をインポートします //axios.create は axios インスタンスを作成し、インスタンスの設定を書き込みます。インスタンスを介して送信される後続のすべてのリクエストは、現在の設定の対象となります。const $http = axios.create({ ベースURL: ''、 タイムアウト: 1000、 //ヘッダー: {'X-Custom-Header': 'foobar'} }); // リクエストインターセプターを追加 $http.interceptors.request.use(function (config) { // リクエストを送信する前に何かを実行します return config; }, 関数 (エラー) { // リクエストエラーに対して何かを実行します。 return Promise.reject(error); }); // レスポンスインターセプターを追加 $http.interceptors.response.use(function (response) { // レスポンスデータで何かを行う return response.data; // レスポンスデータのデータ部分を返す }, function (error) { // エラーに対して何らかの処理を実行します。 return Promise.reject(error); }); デフォルトの$httpをエクスポートする API呼び出し関数 エクスポートconst getCourses = () => { $http.get('http://localhost:8080/teacher/courses') を返します } この例では、フロントエンドはポート 8081 を使用し、バックエンドはポート 8080 を使用し、フロントエンドは API を呼び出してデータを要求できません。 Postmanは、このAPIインターフェースが正常であることをテストします 相同性問題をどうやって解決するか?1. vueルートディレクトリに新しいvue.config.jsファイルを作成し、設定します。 vue.config.js ファイル モジュール.エクスポート = { 開発サーバー: { host: 'localhost', //ホスト番号 port: 8081, //ポート番号 open: true, //ブラウザプロキシを自動的に開く: { '/api': { target: 'http://localhost:8080/', //インターフェースドメイン名の変更Origin: true, //クロスドメインですか? ws: true, //Websocketのプロキシですか? secure: true, //https インターフェースかどうか pathRewrite: { //パスをリセット '^/api': '/' } } } } }; 2. APIリクエストを変更する API呼び出し関数 エクスポートconst getCourses = () => { $http.get('/api/teacher/courses') を返します } ここでは、vue.config.jsがインターフェースのドメイン名を設定するので、ここのURLには残りを記述するだけで済みます。 URL 本文
ただし、ここではプロキシを使用しているため、残りの部分(つまり「/teacher/courses」)の前に「/api」を追加して「/api/teacher/courses」を形成します。 この時点で、クロスドメイン問題は解決され、フロントエンドはバックエンドインターフェースからデータを取得して表示することができます。 問題は解決しました! Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメイン問題についての記事はこれで終わりです。より関連性の高い vue SpringBoot フロントエンドとバックエンドの分離のクロスドメインコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法
>>: Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)
Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...
CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れて...
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...
123WordPress.com-HTML noscriptオブジェクトolオプションPパラントプレ...
効果効果図は以下のとおりです実装のアイデアDivは太陽の長方形の光と影を実現します前の疑似要素は、既...
比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...
mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...
idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...
フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...
需要シナリオ:上司は、クローラーを使用してMySQLデータベースにデータを書き込んだり更新したり...
目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...
目次序文やることリストやるだけ地図を準備するインスタンスをバックアップ用に保存するタイマーカルーセル...
問題の説明(キープアライブとは何か)キープアライブ 名前の通り、アクティブな状態を維持します。誰が活...
目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...
オリジナルリンク: https://vien.tech/article/157序文この記事では、Ub...