vue-cliテンプレートのローカルバージョンは、ローカル開発環境でノードサーバーのクロスドメインメソッドを使用します。

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

背景

ブラウザには、同じ起源のポリシーであるコアと基本的なセキュリティ機能があります。 相同性は、プロトコル、ドメイン名、ポートです。 ブラウザがサーバーの異なるソースにアクセスすると、データにアクセスしません。 開発中に頻繁にアクセスされるさまざまなサーバーのソースには、アクセスする必要のあるサーバーにアクセスするための仲介者としてサーバーからアクセスできます。 同じ起点のポリシーはブラウザのセキュリティメカニズムであり、サーバーはこの制限の対象ではないためです。 vue-cliテンプレートビルドフォルダにdev-serve.jsファイルがある前に、このファイルにクロスドメインを実装するようにローカルノードサーバを設定することができます。 強制されていない、メソッドです。

特定の操作

1.ビルドフォルダに新しい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リクエストをローカルに送信すると、ノードサーバーを介してデータにアクセスして、私がアキシャルを使用するよう要求することができます。 要求は次のとおりです。


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

要求されたデータは次のとおりです。

結論

したがって、ローカルノードサーバーのクロスドメインを実装するのは簡単ですが、開発環境ではデータを要求できますが、npm実行ビルドは静的ファイルにパッケージ化された後は無効になります。 道路はまだ非常に長く、私はあなたにアドバイスをお願いします。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ