vue-cli でノードサーバーを使用するためのクロスドメイン手順の詳細な説明

今回は、vue-cli でドメインを越えてノードサーバーを使用する手順について詳しく説明します。vue-cli でドメインを越えてノードサーバーを使用する場合の注意事項を紹介します。 。

背景

ブラウザには、同一生成元ポリシーという中核的で最も基本的なセキュリティ機能があることは誰もが知っています。プロトコル、ドメイン名、ポートの起源は同じです。ブラウザが別のソースからサーバーにアクセスすると、データにアクセスできなくなります。開発中に頻繁にアクセスするサーバーが異なるソースである場合、サーバーを仲介として使用して、データを取得するためにアクセスする必要があるサーバーにアクセスできます。同一生成元ポリシーはブラウザのセキュリティ メカニズムであるため、サーバーはこの制限の影響を受けません。以前は、vue-cli テンプレートのビルド フォルダーに dev-serve.js ファイルがあり、このファイルでローカル ノード サーバーを構成してクロスドメインを実現できました。しかし、現在のテンプレートにはそのようなファイルはありません。では、ノードのクロスドメインをどのように使用するのでしょうか?無理強いするのではなく、その方法に従ってください。

具体的な操作

1. build フォルダーの下に新しい dev-serve.js ファイルを作成し、次のコードを追加します。

'use strict'
const express = require('express')
const axios = require('axios')
module.exports = function () {
  let app = express()
  app.get('/api/getDiscList', (req, res) => {
    let url = '请求地址'
    axios.get(url, {
      headers: {
      //这里请求的是QQ音乐的接口，带上下面参数是为了骗服务器是自己人
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {
      res.json(response.data)
    }).catch((e) => {
      console.log(e)
    })
  })
  app.listen(3000)
}

2. build.js に導入して実行するには、 require( を追加するだけです。先頭の './dev-serve.js')()

npm run dev を実行してプロジェクトを実行すると、ノードサーバーは自動的にポート 3000

3 のリッスンを開始し、ローカルで ajax リクエストを送信できます。ノードサーバー経由でデータにアクセスします。使用しているリクエストはaxiosです。リクエストは次のとおりです:

import axios from 'axios'
function getDiscList() {  
  const data = {
    //...请求参数
  }
  return axios.get('/api/getDiscList', {
    params: data
  }).then(res => {
    return Promise.resolve(res.data)
  })
}

リクエストされたデータは次のとおりです:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連情報に注目してください。 PHP 中国語 Web サイトの記事をご覧ください。

推奨読書:

遅延読み込みプロセス中に読み込みを追加

babel変換es6メソッドの実装

vueフィルターの詳細な紹介と使用方法

以上がvue-cli でノードサーバーを使用するためのクロスドメイン手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。