Vueでクロスドメインを実装する方法

フロントエンド テクノロジの継続的な開発に伴い、フロントエンド エンジニアは Web サイトを作成するときに Ajax リクエストを通じてデータを取得する必要があることがよくあります。このプロセスでは、クロスドメインの問題が発生しやすくなります。この記事では、Vue.js がクロスドメイン リクエストを実装する方法を紹介します。

1. JSONP クロスドメイン

JSONP (パディング付き JSON) は、クロスドメイン データ対話のためのソリューションです。これは、ページがクロスサイト スクリプティングを読み込めるという原則を使用して実装されます。

Vue.js で JSONP クロスドメイン リクエストを実装するには、通常 2 つの方法があります:

1) スクリプト タグを手動で作成する

axios や Vue などの HTTP ライブラリを使用する-resource 、スクリプト タグを手動で作成してクロスドメイン リクエストを開始します。

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Vue.js プラグインの使用 jsonp

Vue.js には、JSONP クロスドメイン リクエストの実装に使用できる jsonp というプラグインが用意されています。

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS クロスドメイン

CORS (クロスオリジン リソース共有) は、Web サイト サーバーがクロスオリジン リソースを許可できるクロスドメイン リソース共有ソリューションです。ブラウザへの共有 ドメイン アクセスにより、JSONP メソッドのセキュリティ問題の一部が回避されます。

CORS クロスドメイン リクエストは Vue.js で使用されるため、サーバー側で関連する設定を行う必要があります。具体的な実装方法は次のとおりです。

1) 応答ヘッダーに Access-Control-Allow-Origin フィールドを追加します。

応答ヘッダーに Access-Control-Allow-Origin フィールドを追加します。サーバーによって返された、フロントエンド ページの特定のドメイン名からのリクエストを許可します。

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Vue.js でリクエストを送信する

withCredentials を true に設定して、Vue.js の Axios ライブラリを通じてクロスドメイン リクエストを送信します。

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

概要

上記は、Vue.js、JSONP、CORS でクロスドメイン リクエストを実装する 2 つの方法です。実際の開発では、状況に応じてさまざまな方法を採用できます。安全性が高く、追加のサーバー構成が必要ない場合は、JSONP クロスドメイン ソリューションを使用できます。より高いセキュリティと柔軟性が必要な場合は、CORS クロスドメイン ソリューションを使用できます。

以上がVueでクロスドメインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。