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

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

王林

リリース： 2023-10-08 21:36:16

オリジナル

1612 人が閲覧しました

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

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

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

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

2. 解決策

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

// vue.config.js

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

ログイン後にコピー

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

// 后端代码
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 環境にデプロイされている場合は、クロスプロキシを解決するためにリバースプロキシを実装するように 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 テクノロジー開発でクロスドメインの問題に遭遇するすべての人に役立つことを願っています。