ノードサーバーのクロスドメイン手順の詳細な説明-jsチュートリアル-php.cn

ノードサーバーのクロスドメイン手順の詳細な説明

php中世界最好的语言

リリース： 2018-04-20 11:26:00

オリジナル

2028 人が閲覧しました

今回は、ノードサーバーのクロスドメインの手順について詳しく説明します。ノードサーバーのクロスドメインの注意事項は何ですか?実際のケースを見てみましょう。

背景

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

ログイン後にコピー

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