COVID-19 自己検出システムの Web デザインおよび開発ドキュメント
Vue.js をベースにした Sylvan Ding の最初のプロジェクト。このプロジェクトで提供される情報は参照のみを目的としており、情報の正確性、有効性、適時性、完全性は保証されません。詳細については、国家衛生健康委員会委員会を参照してください。 Webサイト！
ドキュメントを参照する »
デモを表示する·バグを報告する·機能をリクエストする
仮想プロキシサーバーを通じて Axios クロスドメインの問題を解決する
クライアントがサーバーにデータを要求したときに、クロスドメインの問題が発生しました。axios を使用した直接クロスドメイン アクセスは実現できないため、プロキシを構成する必要があります。
プロキシ サーバーは別のサーバーにデータを要求し、サーバーは要求されたデータをプロキシ サーバーに返し、プロキシ サーバーはデータをクライアントに返します。
開発環境
| ノード | 14.16.1 |
|---|---|
| npm | 8.18.0 |
| ビュー-cli | 2.9.6 |
| ビュー | 2.5.2 |
解決
config フォルダーの下のファイルのproxyTableフィールドに、次のルールを追加します。index.js
// config/index.js
const port = 8080
const devServerPort = 8081
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: `http://localhost:${
devServerPort}/static/mock`,
changeOrigin: true, // override the origin of the host header
pathRewrite: {
'^/': '', // replace the request address in the target
},
},
},
// ...
}
// ...
}
これで、axios はリクエスト アドレスの先頭シンボル/を に置き換えます。http://localhost:${devServerPort}/static/mockproxyTable がオーバーライドされないように、開発環境では必ず BaseURL 設定をキャンセルしてください。
// src/utils/request.js
const prodBaseURL = 'http://localhost:5000'
let axiosConfig = {
timeout: 3000,
// ...
}
// set baseURL under production environment
if (process.env.NODE_ENV === 'production') {
axiosConfig.baseURL = prodBaseURL
}
const instance = axios.create(axiosConfig)
// ...
転載の際は出典を明記してください: ©️ Sylvan Ding 2022