[Kesalahan CORS] Masalah permintaan lintas domain: Solusi CORS di berbagai lingkungan

2024-07-12

Masukkan deskripsi gambar di sini

🔥 个人主页：puisi kosong

Masukkan deskripsi gambar di sini

Direktori artikel

Masukkan deskripsi gambar di sini

Berbagi sumber daya lintas domain Masalah (CORS, Cross-Origin Resource Sharing) adalah tantangan umum dalam pengembangan front-end. Artikel ini akan memperkenalkan solusi secara detail di lingkungan yang berbeda (seperti proyek Vue3 + Vite, proyek jQuery, dan lingkungan lainnya).

1. Penyebab umum kesalahan CORS

Inti dari masalah lintas domain adalah browser membatasi pemuatan sumber daya dari satu sumber (domain, protokol, port) ke sumber lain untuk alasan keamanan. Mekanisme keamanan ini disebut “kebijakan asal yang sama”. Kebijakan asal yang sama menetapkan bahwa browser akan mengizinkan permintaan diteruskan hanya jika URL yang diminta memiliki protokol, nama domain, dan port yang sama dengan URL halaman web saat ini.

Kurangnya header CORS：
Server tidak menyetel header respons CORS yang benar, menyebabkan browser menolak permintaan tersebut.Misalnya, browser mengharapkan respons server termuatAccess-Control-Allow-Origin header, jika header ini tidak disetel, browser akan memblokir permintaan tersebut.
Permintaan lintas asal dilarang：
Secara default, browser memblokir permintaan lintas asal untuk melindungi keamanan pengguna. Jika server tidak mengizinkan akses ke domain tertentu, browser akan menampilkan kesalahan CORS.
Permintaan pra-penerbangan gagal：
Untuk beberapa permintaan kompleks, browser akan mengirimkan permintaan preflight (permintaan OPTIONS) untuk mengonfirmasi apakah server mengizinkan permintaan tersebut. Jika permintaan pra-penerbangan gagal, kesalahan CORS akan terjadi.

2. Solusi

1. Vue3 + Solusi di bawah proyek Vite

Melalui fungsi proksi server pengembangan Vite, permintaan lokal dapat diproksi ke server yang berbeda untuk menghindari masalah lintas domain. Berikut langkah spesifiknya:

Buat proyek Vue3 + Vite

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

Pilih template Vue3 dan masuk ke direktori proyek.

Konfigurasikan proksi Vite

Ditemukan di direktori root proyek Vitevite.config.ts(atauvite.config.js), dan buat konfigurasi berikut:

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

kirim permintaan

Di komponen Vue, Anda bisa meneruskannyaaxiosataufetch kirim permintaan. Misalnya:

<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. Solusi di bawah proyek jQuery

Dalam proyek jQuery, masalah CORS dapat diselesaikan dengan mengatur header permintaan atau menggunakan JSONP.

Gunakan header permintaan CORS

Pastikan server memiliki set header CORS yang benar, seperti Access-Control-Allow-Origin . Saat klien memulai permintaan:

<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

Menggunakan JSONP

Jika server mendukung JSONP, masalah lintas domain dapat diselesaikan dengan cara berikut:

<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. Solusi di lingkungan lain

Gunakan proxy sisi server

Dalam banyak kasus, proxy dapat diatur di sisi server untuk meneruskan permintaan lintas domain melalui sisi server.Misalnya, di Node.js Anda dapat menggunakanhttp-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

Setel header CORS

Pastikan header CORS yang benar disertakan dalam respons server. Misalnya, di 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

Konfigurasikan proxy menggunakan Nginx

Di Nginx, masalah CORS dapat diselesaikan dengan mengkonfigurasi 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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

3. Ringkasan

Masalah CORS adalahPengembangan ujung depan Tantangan umum, namun dapat diselesaikan secara efektif dengan konfigurasi proxy dan pengaturan server yang tepat. Di lingkungan yang berbeda, Anda dapat menggunakan fungsi proksi Vite, mengatur header permintaan, JSONP, proksi sisi server, proksi Nginx, dan metode lain untuk menyelesaikan masalah lintas domain. Saya harap artikel ini akan membantu Anda memahami dan memecahkan masalah CORS.

Berbagi teknologi