Façons de résoudre les problèmes CORS

Pour résoudre les problèmes CORS, vous devez ajouter les en-têtes appropriés soit dans le serveur Web (comme Apache ou Nginx), dans le backend (comme Django, Go ou Node.js) , ou dans les frameworks frontend (comme React ou Next.js). Voici les étapes pour chaque plateforme :

1. Serveurs Web

Apache

Vous pouvez configurer les en-têtes CORS dans les fichiers de configuration d'Apache (tels que .htaccess, httpd.conf ou apache2.conf) ou dans une configuration d'hôte virtuel spécifique.

Ajoutez les lignes suivantes pour activer CORS :

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

• Pour appliquer CORS à des domaines spécifiques :

  Header set Access-Control-Allow-Origin "https://example.com"

• Si des informations d'identification sont requises :

  Header set Access-Control-Allow-Credentials "true"

Assurez-vous que le module mod_headers est activé. Sinon, activez-le en utilisant :

sudo a2enmod headers
sudo systemctl restart apache2

Nginx

Dans Nginx, vous pouvez configurer les en-têtes CORS dans le nginx.conf ou dans un bloc de serveur spécifique.

Ajoutez les lignes suivantes :

server {
    location / {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
    }

    # Optional: Add for handling preflight OPTIONS requests
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "*";
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type";
        return 204;
    }
}

• Si des informations d'identification sont requises :

  add_header Access-Control-Allow-Credentials "true";

Puis redémarrez Nginx :

sudo systemctl restart nginx

---

2. Cadres backend

Django

Dans Django, vous pouvez ajouter des en-têtes CORS à l'aide du package django-cors-headers.

1. Installez le package :

   pip install django-cors-headers

1. Ajoutez des « corsheaders » à INSTALLED_APPS dans votre settings.py :

   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]

1. Ajoutez le middleware CORS à votre MIDDLEWARE :

   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...
   ]

1. Définissez les origines autorisées dans settings.py :

   CORS_ALLOWED_ORIGINS = [
       "https://example.com",
   ]

• Pour autoriser toutes les origines :

  CORS_ALLOW_ALL_ORIGINS = True

• Si des informations d'identification sont requises :

  CORS_ALLOW_CREDENTIALS = True

• Pour autoriser des en-têtes ou des méthodes spécifiques :

  CORS_ALLOW_HEADERS = ['Authorization', 'Content-Type']
  CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']

Allez (Golang)

Dans Go, vous pouvez gérer CORS manuellement dans le gestionnaire HTTP ou utiliser un middleware comme rs/cors.

Utilisation du middleware rs/cors :

1. Installez le package :

   go get github.com/rs/cors

1. Utilisez-le dans votre application :

   package main

   import (
       "net/http"
       "github.com/rs/cors"
   )

   func main() {
       mux := http.NewServeMux()

       // Example handler
       mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
           w.Write([]byte("Hello, World!"))
       })

       // CORS middleware
       handler := cors.New(cors.Options{
           AllowedOrigins:   []string{"https://example.com"}, // Or use * for all
           AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
           AllowedHeaders:   []string{"Authorization", "Content-Type"},
           AllowCredentials: true,
       }).Handler(mux)

       http.ListenAndServe(":8080", handler)
   }

Node.js (Express)

Dans Express (Node.js), vous pouvez utiliser le middleware cors.

1. Installez le package cors :

   npm install cors

1. Ajoutez le middleware dans votre application Express :

   const express = require('express');
   const cors = require('cors');
   const app = express();

   // Enable CORS for all routes
   app.use(cors());

   // To allow specific origins
   app.use(cors({
       origin: 'https://example.com',
       methods: ['GET', 'POST', 'PUT', 'DELETE'],
       allowedHeaders: ['Authorization', 'Content-Type'],
       credentials: true
   }));

   // Example route
   app.get('/', (req, res) => {
       res.send('Hello World');
   });

   app.listen(3000, () => {
       console.log('Server running on port 3000');
   });

---

3. Frameworks frontaux

Réagir

Dans React, CORS est géré par le backend, mais pendant le développement, vous pouvez proxy les requêtes API pour éviter les problèmes CORS.

1. Ajoutez un proxy au package.json :

   {
     "proxy": "http://localhost:5000"
   }

Cela transmettra les requêtes pendant le développement à votre serveur backend exécuté sur le port 5000.

Pour la production, le backend doit gérer CORS. Si nécessaire, utilisez un outil comme http-proxy-middleware pour plus de contrôle.

Suivant.js

Dans Next.js, vous pouvez configurer CORS dans les routes API.

1. Créez un middleware personnalisé pour les routes API :

   export default function handler(req, res) {
       res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
       res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
       res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');

       if (req.method === 'OPTIONS') {
           // Handle preflight request
           res.status(200).end();
           return;
       }

       // Handle the actual request
       res.status(200).json({ message: 'Hello from Next.js' });
   }

1. Dans next.config.js, vous pouvez également modifier les en-têtes de réponse :

   module.exports = {
       async headers() {
           return [
               {
                   source: '/(.*)', // Apply to all routes
                   headers: [
                       {
                           key: 'Access-Control-Allow-Origin',
                           value: '*', // Allow all origins
                       },
                       {
                           key: 'Access-Control-Allow-Methods',
                           value: 'GET, POST, PUT, DELETE, OPTIONS',
                       },
                       {
                           key: 'Access-Control-Allow-Headers',
                           value: 'Authorization, Content-Type',
                       },
                   ],
               },
           ];
       },
   };

---

Résumé de l'endroit où ajouter des en-têtes :

• Serveurs Web (Apache, Nginx) : configurer dans les fichiers de configuration du serveur (par exemple, .htaccess, nginx.conf).
• Cadres backend :
  • Django : utilisez Django-cors-headers.
  • Go : ajoutez manuellement des en-têtes ou utilisez un middleware comme rs/cors.
  • Node.js (Express) : Utilisez le middleware cors.
• Frontend : en développement, utilisez des configurations de proxy (comme le proxy de React ou les en-têtes personnalisés Next.js) pour éviter les problèmes CORS, mais gérez toujours CORS dans le backend en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!