[CORS-Fehler] Problem mit domänenübergreifenden Anforderungen: CORS-Lösungen in verschiedenen Umgebungen

2024-07-12

Fügen Sie hier eine Bildbeschreibung ein

🔥 个人主页：leeres Gedicht

Fügen Sie hier eine Bildbeschreibung ein

Artikelverzeichnis

Fügen Sie hier eine Bildbeschreibung ein

Domainübergreifende gemeinsame Nutzung von Ressourcen (CORS, Cross-Origin Resource Sharing) Probleme sind eine häufige Herausforderung bei der Front-End-Entwicklung. In diesem Artikel werden Lösungen in verschiedenen Umgebungen (z. B. Vue3 + Vite-Projekten, jQuery-Projekten und anderen Umgebungen) im Detail vorgestellt.

1. Häufige Ursachen für CORS-Fehler

Der Kern des domänenübergreifenden Problems besteht darin, dass der Browser aus Sicherheitsgründen das Laden von Ressourcen von einer Quelle (Domäne, Protokoll, Port) auf eine andere Quelle beschränkt. Dieser Sicherheitsmechanismus wird als „Same-Origin-Policy“ bezeichnet. Die Same-Origin-Richtlinie legt fest, dass der Browser die Anfrage nur dann passieren lässt, wenn die angeforderte URL dasselbe Protokoll, denselben Domänennamen und denselben Port wie die URL der aktuellen Webseite hat.

Fehlende CORS-Header：
Der Server hat nicht die richtigen CORS-Antwortheader festgelegt, was dazu führte, dass der Browser die Anfrage ablehnte.Beispielsweise erwartet der Browser, dass die Serverantwort Folgendes enthältAccess-Control-Allow-Origin Header, wenn dieser Header nicht gesetzt ist, blockiert der Browser die Anfrage.
Cross-Origin-Anfragen sind verboten：
Standardmäßig blockieren Browser Cross-Origin-Anfragen, um Benutzer zu schützen. Wenn der Server den Zugriff für eine bestimmte Domäne nicht zulässt, gibt der Browser einen CORS-Fehler aus.
Die Preflight-Anfrage ist fehlgeschlagen：
Bei einigen komplexen Anfragen sendet der Browser eine Preflight-Anfrage (OPTIONS-Anfrage), um zu bestätigen, ob der Server die Anfrage zulässt. Wenn die Preflight-Anfrage fehlschlägt, kommt es zu einem CORS-Fehler.

2. Lösung

1. Vue3 + Lösungen im Rahmen des Vite-Projekts

Durch die Proxy-Funktion des Entwicklungsservers von Vite können lokale Anforderungen an verschiedene Server weitergeleitet werden, um domänenübergreifende Probleme zu vermeiden. Hier sind die spezifischen Schritte:

Erstellen Sie ein Vue3 + Vite-Projekt

npm create vite@latest
cd your-project-name
npm install
1
2
3

Wählen Sie die Vue3-Vorlage aus und geben Sie das Projektverzeichnis ein.

Konfigurieren Sie den Proxy von Vite

Gefunden im Stammverzeichnis des Vite-Projektsvite.config.ts(odervite.config.js) und nehmen Sie die folgende Konfiguration vor:

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/, ''), // 重写路径
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Anfrage senden

In der Vue-Komponente können Sie bestehenaxiosoderfetch Anfrage senden. Zum Beispiel:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. Lösungen im Rahmen des jQuery-Projekts

In jQuery-Projekten können CORS-Probleme durch das Festlegen von Anforderungsheadern oder die Verwendung von JSONP gelöst werden.

Verwenden Sie CORS-Anfrageheader

Stellen Sie sicher, dass auf dem Server die richtigen CORS-Header festgelegt sind, z Access-Control-Allow-Origin . Wenn der Client eine Anfrage initiiert:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

Verwendung von JSONP

Wenn der Server JSONP unterstützt, können domänenübergreifende Probleme auf folgende Weise gelöst werden:

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. Lösungen in anderen Umgebungen

Verwenden Sie serverseitige Proxys

In vielen Fällen kann serverseitig ein Proxy eingerichtet werden, um domänenübergreifende Anfragen serverseitig weiterzuleiten.Beispielsweise können Sie in Node.js verwendenhttp-proxy-middleware：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/api', createProxyMiddleware({
  target: 'http://api.example.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': '',
  },
}));
1
2
3
4
5
6
7
8
9

Legen Sie CORS-Header fest

Stellen Sie sicher, dass die Serverantwort die richtigen CORS-Header enthält. Zum Beispiel in 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');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Proxy mit Nginx konfigurieren

In Nginx können CORS-Probleme durch die Konfiguration des Proxys gelöst werden:

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

3. Zusammenfassung

Das CORS-Problem istFrontend-Entwicklung Eine häufige Herausforderung, die jedoch mit der richtigen Proxy-Konfiguration und den richtigen Servereinstellungen effektiv gelöst werden kann. In verschiedenen Umgebungen können Sie die Proxy-Funktion von Vite verwenden, Anforderungsheader festlegen, JSONP, serverseitigen Proxy, Nginx-Proxy und andere Methoden verwenden, um domänenübergreifende Probleme zu lösen. Ich hoffe, dass dieser Artikel Ihnen hilft, CORS-Probleme zu verstehen und zu lösen.

Technologieaustausch