2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Partage de ressources entre domaines (CORS, Cross-Origin Resource Sharing) sont un défi courant dans le développement front-end. Cet article présentera en détail les solutions dans différents environnements (tels que les projets Vue3 + Vite, les projets jQuery et d'autres environnements).
L'essence du problème inter-domaines est que le navigateur restreint le chargement des ressources d'une source (domaine, protocole, port) vers une autre source pour des raisons de sécurité. Ce mécanisme de sécurité est appelé « politique de même origine ». La politique de même origine stipule que le navigateur autorisera le passage de la requête uniquement si l'URL demandée a le même protocole, le même nom de domaine et le même port que l'URL de la page Web actuelle.
Manque d'en-têtes CORS：
Le serveur n'a pas défini les en-têtes de réponse CORS corrects, ce qui a entraîné le rejet de la demande par le navigateur.Par exemple, le navigateur s'attend à ce que la réponse du serveur contienneAccess-Control-Allow-Origin en-tête, si cet en-tête n'est pas défini, le navigateur bloquera la requête.
Les requêtes cross-origin sont interdites：
Par défaut, les navigateurs bloquent les requêtes cross-origin pour protéger les utilisateurs. Si le serveur n'autorise pas l'accès à un domaine spécifique, le navigateur générera une erreur CORS.
La demande de contrôle en amont a échoué：
Pour certaines requêtes complexes, le navigateur enverra une requête de contrôle en amont (demande OPTIONS) pour confirmer si le serveur autorise la requête. Si la demande de contrôle en amont échoue, une erreur CORS se produira.
Grâce à la fonction proxy du serveur de développement de Vite, les requêtes locales peuvent être transmises à différents serveurs pour éviter les problèmes inter-domaines. Voici les étapes spécifiques :
npm create vite@latest
cd your-project-name
npm install
Sélectionnez le modèle Vue3 et entrez dans le répertoire du projet.
Trouvé dans le répertoire racine du projet Vitevite.config.ts(ouvite.config.js), et effectuez la configuration suivante :
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
proxy: {
'/api': {
target: 'http://api.example.com', // 目标服务器
changeOrigin: true, // 是否改变请求源
rewrite: (path) => path.replace(/^/api/, ''), // 重写路径
},
},
},
});
Dans le composant Vue, vous pouvez passeraxiosoufetch envoyer une demande. Par exemple:
<template>
<div>
<button @click="fetchData">获取数据</button>
<div v-if="data">{{ data }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
export default defineComponent({
setup() {
const data = ref(null);
const fetchData = async () => {
try {
const response = await axios.get('/api/data');
data.value = response.data;
} catch (error) {
console.error('请求错误:', error);
}
};
return {
data,
fetchData,
};
},
});
</script>
Dans les projets jQuery, les problèmes CORS peuvent être résolus en définissant des en-têtes de requête ou en utilisant JSONP.
Assurez-vous que le serveur dispose des en-têtes CORS corrects, tels que Access-Control-Allow-Origin . Lorsque le client lance une demande :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: 'http://api.example.com/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error('请求错误:', error);
}
});
</script>
Si le serveur prend en charge JSONP, les problèmes inter-domaines peuvent être résolus des manières suivantes :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: 'http://api.example.com/data',
method: 'GET',
dataType: 'jsonp', // 使用JSONP
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error('请求错误:', error);
}
});
</script>
Dans de nombreux cas, un proxy peut être configuré côté serveur pour transmettre les requêtes inter-domaines via le côté serveur.Par exemple, dans Node.js, vous pouvez utiliserhttp-proxy-middleware：
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}));
Assurez-vous que les en-têtes CORS corrects sont inclus dans la réponse du serveur. Par exemple, dans Node.js + Express :
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
app.get('/data', (req, res) => {
res.json({ message: 'Hello World' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Dans Nginx, les problèmes CORS peuvent être résolus en configurant le proxy :
server {
listen 80;
server_name yourdomain.com;
location /api/ {
proxy_pass http://api.example.com/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Le problème CORS estDéveloppement front-end Un défi courant, mais qui peut être résolu efficacement avec une configuration proxy et des paramètres de serveur appropriés. Dans différents environnements, vous pouvez utiliser la fonction proxy de Vite, définir des en-têtes de requête, JSONP, un proxy côté serveur, un proxy Nginx et d'autres méthodes pour résoudre les problèmes inter-domaines. J'espère que cet article vous aidera à comprendre et à résoudre les problèmes CORS.
Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.
