Heim > Web-Frontend > js-Tutorial > Hauptteil

Möglichkeiten zur Lösung von CORS-Problemen

Barbara Streisand
Freigeben: 2024-10-01 06:18:29
Original
255 Leute haben es durchsucht

Ways to resolve CORS issues

Um CORS-Probleme zu beheben, müssen Sie die entsprechenden Header entweder im Webserver (wie Apache oder Nginx) oder im Backend (wie Django, Go oder Node.js) hinzufügen. , oder in den Frontend-Frameworks (wie React oder Next.js). Nachfolgend finden Sie die Schritte für jede Plattform:

1. Webserver

Apache

Sie können CORS-Header in den Konfigurationsdateien von Apache (z. B. .htaccess, httpd.conf oder apache2.conf) oder innerhalb einer bestimmten virtuellen Hostkonfiguration konfigurieren.

Fügen Sie die folgenden Zeilen hinzu, um CORS zu aktivieren:

<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>
Nach dem Login kopieren
  • So wenden Sie CORS für bestimmte Domänen an:
  Header set Access-Control-Allow-Origin "https://example.com"
Nach dem Login kopieren
  • Wenn Anmeldeinformationen erforderlich sind:
  Header set Access-Control-Allow-Credentials "true"
Nach dem Login kopieren

Stellen Sie sicher, dass das Modul mod_headers aktiviert ist. Wenn nicht, aktivieren Sie es mit:

sudo a2enmod headers
sudo systemctl restart apache2
Nach dem Login kopieren

Nginx

In Nginx können Sie CORS-Header in der nginx.conf oder innerhalb eines bestimmten Serverblocks konfigurieren.

Fügen Sie die folgenden Zeilen hinzu:

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;
    }
}
Nach dem Login kopieren
  • Wenn Anmeldeinformationen erforderlich sind:
  add_header Access-Control-Allow-Credentials "true";
Nach dem Login kopieren

Dann starten Sie Nginx neu:

sudo systemctl restart nginx
Nach dem Login kopieren

2. Backend-Frameworks

Django

In Django können Sie CORS-Header mit dem Paket django-cors-headers hinzufügen.

  1. Installieren Sie das Paket:
   pip install django-cors-headers
Nach dem Login kopieren
  1. Fügen Sie „corsheaders“ zu INSTALLED_APPS in Ihrer Settings.py hinzu:
   INSTALLED_APPS = [
       ...
       'corsheaders',
   ]
Nach dem Login kopieren
  1. Fügen Sie die CORS-Middleware zu Ihrer MIDDLEWARE hinzu:
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       ...
   ]
Nach dem Login kopieren
  1. Legen Sie die zulässigen Ursprünge in Settings.py fest:
   CORS_ALLOWED_ORIGINS = [
       "https://example.com",
   ]
Nach dem Login kopieren
  • Um alle Ursprünge zuzulassen:
  CORS_ALLOW_ALL_ORIGINS = True
Nach dem Login kopieren
  • Wenn Anmeldeinformationen erforderlich sind:
  CORS_ALLOW_CREDENTIALS = True
Nach dem Login kopieren
  • Um bestimmte Header oder Methoden zuzulassen:
  CORS_ALLOW_HEADERS = ['Authorization', 'Content-Type']
  CORS_ALLOW_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
Nach dem Login kopieren

Gehen (Golang)

In Go können Sie CORS manuell im HTTP-Handler verarbeiten oder eine Middleware wie rs/cors verwenden.

Verwendung der RS/Cors-Middleware:

  1. Installieren Sie das Paket:
   go get github.com/rs/cors
Nach dem Login kopieren
  1. Verwenden Sie es in Ihrer Bewerbung:
   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)
   }
Nach dem Login kopieren

Node.js (Express)

In Express (Node.js) können Sie die CORS-Middleware verwenden.

  1. Installieren Sie das cors-Paket:
   npm install cors
Nach dem Login kopieren
  1. Fügen Sie die Middleware in Ihrer Express-App hinzu:
   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');
   });
Nach dem Login kopieren

3. Frontend-Frameworks

Reagieren

In React wird CORS vom Backend verwaltet, aber während der Entwicklung können Sie API-Anfragen weiterleiten, um CORS-Probleme zu vermeiden.

  1. Fügen Sie einen Proxy zur package.json hinzu:
   {
     "proxy": "http://localhost:5000"
   }
Nach dem Login kopieren

Dadurch werden Anfragen während der Entwicklung an Ihren Backend-Server weitergeleitet, der auf Port 5000 läuft.

Für die Produktion sollte das Backend CORS verarbeiten. Verwenden Sie bei Bedarf ein Tool wie http-proxy-middleware für mehr Kontrolle.

Next.js

In Next.js können Sie CORS in den API-Routen konfigurieren.

  1. Erstellen Sie eine benutzerdefinierte Middleware für API-Routen:
   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' });
   }
Nach dem Login kopieren
  1. In next.config.js können Sie auch Antwortheader ändern:
   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',
                       },
                   ],
               },
           ];
       },
   };
Nach dem Login kopieren

Zusammenfassung zum Hinzufügen von Headern:

  • Webserver (Apache, Nginx): Konfigurieren Sie in Serverkonfigurationsdateien (z. B. .htaccess, nginx.conf).
  • Backend-Frameworks:
    • Django: Verwenden Sie Django-Cors-Header.
    • Los: Header manuell hinzufügen oder eine Middleware wie rs/cors verwenden.
    • Node.js (Express): Verwenden Sie die CORS-Middleware.
  • Frontend: Verwenden Sie in der Entwicklung Proxy-Setups (wie den Proxy von React oder benutzerdefinierte Header von Next.js), um CORS-Probleme zu vermeiden, behandeln Sie CORS jedoch in der Produktion immer im Backend.

Das obige ist der detaillierte Inhalt vonMöglichkeiten zur Lösung von CORS-Problemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage