Vue テクノロジー開発で遭遇するクロスドメインの問題とその解決策

Vue テクノロジの開発中に遭遇するクロスドメインの問題と解決策

要約: この記事では、Vue テクノロジの開発中に遭遇する可能性のあるクロスドメインの問題を紹介します。 Vue テクノロジーとソリューション。まずクロスオリジンの原因から始めて、次にいくつかの一般的な解決策を取り上げ、具体的なコード例を示します。

1. クロスドメインの問題の原因
Web 開発では、ブラウザーのセキュリティ ポリシーにより、ブラウザーは、あるソース (ドメイン、プロトコル、またはポート) から別のソースのリソースに対するリクエストを制限します。これはいわゆる「同一生成元ポリシー」です。 Vue テクノロジーを開発し、フロントエンドとバックエンドのインターフェイスが同じドメインにない場合、クロスドメインの問題が発生します。

2. 解決策

1. プロキシ クロスドメイン
   プロキシ サーバーを使用して API リクエストを転送することは、クロスドメインの問題を解決する一般的な方法です。プロキシ サーバーを指すように vue.config.js の proxyTable プロパティを構成できます。以下はサンプル コードです。

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. JSONP
   JSONP は、## を使用して <script> タグを動的に作成するクロスドメイン リクエスト メソッドです。 #src 属性は、コールバック関数を使用して URL を要求します。バックエンドがデータを返す場合、そのデータはコールバック関数のパラメータとして返され、フロントエンドは返されたデータをコールバック関数を通じて処理します。以下はサンプル コードです。

// 前端代码
import jsonp from 'jsonp'

jsonp('http://api.example.com?callback=handleData', (err, data) => {
  if (err) {
    console.error(err)
  } else {
    handleData(data)
  }
})

function handleData(data) {
  console.log('处理后的数据：', data)
}

// 后端代码
handleData(req, res) {
  const data = {
    name: 'Vue',
    version: '2.6.10'
  }
  const callback = req.query.callback
  res.send(`${callback}(${JSON.stringify(data)})`)
}

CORS
3. CORS は、クロスドメインの問題を処理するために公式に推奨される方法です。バックエンドで対応する応答ヘッダー情報を設定する必要があります。以下はサンプル コードです。
   

// 后端代码
handleData(req, res) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  res.setHeader('Access-Control-Max-Age', '86400')
  // ...
  // 处理请求并返回数据
}

Nginx リバース プロキシ
4. プロジェクトが Nginx 環境にデプロイされている場合は、クロスプロキシを解決するためにリバース プロキシを実装するように Nginx を構成できます。ドメインの問題。以下は Nginx 構成の例です。
   

location /api {
  proxy_pass http://api.example.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  # 允许跨域访问
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
  add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
}

結論

この記事では、Vue テクノロジ開発で遭遇する可能性のあるクロスドメインの問題とその解決策を紹介します。プロキシ クロスドメイン、JSONP、CORS、Nginx リバース プロキシの 4 つの一般的なソリューションについて説明し、対応するコード例を示しました。実際の開発では、プロジェクトのニーズに応じて、クロスドメインの問題を解決するための適切なソリューションを選択できます。この記事が、Vue テクノロジー開発でクロスドメインの問題に遭遇するすべての人に役立つことを願っています。


参考資料:
Vue.js 公式ドキュメント: https://vuejs.org/
• Nginx 公式ドキュメント: https://nginx.org/

以上がVue テクノロジー開発で遭遇するクロスドメインの問題とその解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。