ローカル環境でのノードサーバーのクロスドメイン使用の概要

今回は、ローカル環境での運用ノードサーバーのクロスドメイン利用についてのまとめをお届けします。 ローカル環境で運用ノードサーバーをクロスドメイン利用する場合の注意点は何ですか?見てください。

背景

ブラウザには、同一生成元ポリシーという中核的で最も基本的なセキュリティ機能があることは誰もが知っています。プロトコル、ドメイン名、ポートの起源は同じです。ブラウザが別のソースからサーバーにアクセスすると、データにアクセスできなくなります。開発中に頻繁にアクセスするサーバーが異なるソースである場合、サーバーを仲介として使用して、データを取得するためにアクセスする必要があるサーバーにアクセスできます。同一生成元ポリシーはブラウザのセキュリティ メカニズムであるため、サーバーはこの制限の影響を受けません。以前は、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 サイトの記事をご覧ください。

推奨書籍:

vue+todo-list アプリケーションを公開する方法

vue cli+webapck4 に必要な手順

以上がローカル環境でのノードサーバーのクロスドメイン使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。