Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

🔥 个人主页：κενό ποίημα

Κοινή χρήση πόρων μεταξύ τομέων Τα ζητήματα (CORS, Cross-Origin Resource Sharing) είναι μια κοινή πρόκληση στην ανάπτυξη front-end. Αυτό το άρθρο θα παρουσιάσει λεπτομερώς λύσεις σε διαφορετικά περιβάλλοντα (όπως έργα Vue3 + Vite, έργα jQuery και άλλα περιβάλλοντα).

---

1. Συνήθεις αιτίες σφαλμάτων CORS

Η ουσία του προβλήματος μεταξύ τομέων είναι ότι το πρόγραμμα περιήγησης περιορίζει τη φόρτωση πόρων από μια πηγή (τομέας, πρωτόκολλο, θύρα) σε μια άλλη πηγή για λόγους ασφαλείας. Αυτός ο μηχανισμός ασφαλείας ονομάζεται «πολιτική ίδιας προέλευσης». Η ίδια πολιτική προέλευσης ορίζει ότι το πρόγραμμα περιήγησης θα επιτρέπει τη διέλευση του αιτήματος μόνο εάν το ζητούμενο URL έχει το ίδιο πρωτόκολλο, όνομα τομέα και θύρα με το URL της τρέχουσας ιστοσελίδας.

1. Έλλειψη κεφαλίδων CORS：
   Ο διακομιστής δεν όρισε τις σωστές κεφαλίδες απόκρισης CORS, με αποτέλεσμα το πρόγραμμα περιήγησης να απορρίψει το αίτημα.Για παράδειγμα, το πρόγραμμα περιήγησης αναμένει ότι η απάντηση διακομιστή θα περιέχειAccess-Control-Allow-Origin κεφαλίδα, εάν αυτή η κεφαλίδα δεν έχει οριστεί, το πρόγραμμα περιήγησης θα αποκλείσει το αίτημα.

2. Απαγορεύονται τα αιτήματα διασταυρούμενης καταγωγής：
   Από προεπιλογή, τα προγράμματα περιήγησης αποκλείουν αιτήματα πολλαπλής προέλευσης για την προστασία της ασφάλειας των χρηστών. Εάν ο διακομιστής δεν επιτρέπει την πρόσβαση σε έναν συγκεκριμένο τομέα, το πρόγραμμα περιήγησης θα εμφανίσει ένα σφάλμα CORS.

3. Το αίτημα πριν από την πτήση απέτυχε：
   Για ορισμένα πολύπλοκα αιτήματα, το πρόγραμμα περιήγησης θα στείλει ένα αίτημα προκαταρκτικής πτήσης (αίτημα OPTIONS) για να επιβεβαιώσει εάν ο διακομιστής επιτρέπει την αίτηση. Εάν το αίτημα πριν από την πτήση αποτύχει, θα προκύψει σφάλμα CORS.

---

2. Λύση

1. Vue3 + Λύσεις στο πλαίσιο του έργου Vite

Μέσω της λειτουργίας διακομιστή μεσολάβησης του διακομιστή ανάπτυξης του Vite, τα τοπικά αιτήματα μπορούν να μεταφερθούν με μεσολάβηση σε διαφορετικούς διακομιστές για την αποφυγή προβλημάτων μεταξύ τομέων. Εδώ είναι τα συγκεκριμένα βήματα:

Δημιουργία έργου Vue3 + Vite

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

Επιλέξτε το πρότυπο Vue3 και εισαγάγετε τον κατάλογο του έργου.

Διαμορφώστε τον διακομιστή μεσολάβησης του Vite

Βρέθηκε στον ριζικό κατάλογο του έργου Vitevite.config.ts(ήvite.config.js), και κάντε την ακόλουθη διαμόρφωση:

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

Στείλε αίτημα

Στο στοιχείο Vue, μπορείτε να περάσετεaxiosήfetch Στείλε αίτημα. Για παράδειγμα:

<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. Λύσεις στο πλαίσιο του έργου jQuery

Σε έργα jQuery, τα προβλήματα CORS μπορούν να επιλυθούν ορίζοντας κεφαλίδες αιτημάτων ή χρησιμοποιώντας JSONP.

Χρησιμοποιήστε τις κεφαλίδες αιτημάτων CORS

Βεβαιωθείτε ότι ο διακομιστής έχει τις σωστές κεφαλίδες CORS, όπως π.χ Access-Control-Allow-Origin . Όταν ο πελάτης υποβάλλει ένα αίτημα:

<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

Χρήση JSONP

Εάν ο διακομιστής υποστηρίζει JSONP, τα ζητήματα μεταξύ τομέων μπορούν να επιλυθούν με τους εξής τρόπους:

<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. Λύσεις σε άλλα περιβάλλοντα

Χρησιμοποιήστε διακομιστές μεσολάβησης από την πλευρά του διακομιστή

Σε πολλές περιπτώσεις, μπορεί να ρυθμιστεί ένας διακομιστής μεσολάβησης στην πλευρά του διακομιστή για την προώθηση αιτημάτων μεταξύ τομέων μέσω της πλευράς διακομιστή.Για παράδειγμα, στο Node.js μπορείτε να χρησιμοποιήσετεhttp-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

Ορίστε κεφαλίδες CORS

Βεβαιωθείτε ότι οι σωστές κεφαλίδες CORS περιλαμβάνονται στην απόκριση διακομιστή. Για παράδειγμα, στο 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

Διαμόρφωση διακομιστή μεσολάβησης χρησιμοποιώντας το Nginx

Στο Nginx, τα προβλήματα CORS μπορούν να επιλυθούν ρυθμίζοντας τις παραμέτρους του διακομιστή μεσολάβησης:

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. Περίληψη

Το πρόβλημα CORS είναιΑνάπτυξη front-end Μια κοινή πρόκληση, αλλά μπορεί να λυθεί αποτελεσματικά με την κατάλληλη διαμόρφωση διακομιστή μεσολάβησης και ρυθμίσεις διακομιστή. Σε διαφορετικά περιβάλλοντα, μπορείτε να χρησιμοποιήσετε τη λειτουργία διακομιστή μεσολάβησης του Vite, να ορίσετε κεφαλίδες αιτημάτων, JSONP, διακομιστή μεσολάβησης, διακομιστή μεσολάβησης Nginx και άλλες μεθόδους για την επίλυση προβλημάτων μεταξύ τομέων. Ελπίζω ότι αυτό το άρθρο θα σας βοηθήσει να κατανοήσετε και να λύσετε προβλήματα CORS.