Documents de conception et de développement Web du système d'auto-détection COVID-19
Premier projet de Sylvan Ding basé sur Vue.js. Les informations fournies dans ce projet sont à titre de référence uniquement, et l'exactitude, la validité, l'actualité et l'exhaustivité des informations ne sont pas garanties. Pour plus d'informations, veuillez consulter la Commission nationale de la santé et de la santé. site web!
Explorer la documentation »
Voir la démo · Signaler un bug · Demander une fonctionnalité
Résoudre les problèmes inter-domaines d'Axios via des serveurs proxy virtuels
Un problème inter-domaines s'est produit lorsqu'un client demande des données au serveur. Étant donné qu'un accès direct entre domaines à l'aide d'axios n'est pas réalisable, nous devons configurer le proxy.
Un serveur proxy demande des données à un autre serveur, puis le serveur renvoie les données demandées au serveur proxy et le serveur proxy renvoie les données au client.
environnement de développement
| nœud | 14.16.1 |
|---|---|
| npm | 8.18.0 |
| vue-cli | 2.9.6 |
| vue | 2.5.2 |
solution
Dans le proxyTablechamp du index.jsfichier sous le dossier config, ajoutez la règle suivante :
// 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 remplacera désormais le symbole de début /par http://localhost:${devServerPort}/static/mockdans l'adresse de la requête. Assurez-vous d'annuler la configuration de baseURL dans l'environnement de développement pour éviter que proxyTable ne soit remplacé.
// 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)
// ...
Veuillez indiquer la source lors de la réimpression : ©️ Sylvan Ding 2022