React penyelesaian permintaan merentas domain: cara menangani isu akses merentas domain dalam aplikasi bahagian hadapan

Bertindak balas penyelesaian permintaan merentas domain: Cara menangani isu akses merentas domain dalam aplikasi bahagian hadapan, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, kami sering menghadapi masalah permintaan merentas domain. Permintaan merentas domain bermakna alamat sasaran (nama domain, port, protokol) permintaan HTTP yang dihantar oleh aplikasi bahagian hadapan adalah tidak konsisten dengan alamat halaman semasa. Disebabkan dasar asal yang sama penyemak imbas, permintaan merentas domain adalah terhad. Walau bagaimanapun, dalam pembangunan sebenar, kita sering perlu berkomunikasi dengan pelayan yang berbeza, jadi penyelesaian untuk permintaan merentas domain adalah sangat penting.

Artikel ini akan memperkenalkan penyelesaian permintaan merentas domain React dan memberikan contoh kod khusus.

1. JSONP

JSONP ialah penyelesaian untuk permintaan merentas domain. Ia mengambil kesempatan daripada fakta bahawa teg <script></script> tidak mempunyai sekatan merentas domain. Langkah pelaksanaan khusus adalah seperti berikut: <script></script>标签没有跨域限制的特性。具体实现步骤如下：

1. 在前端应用中，增加一个<script></script>标签，将服务端的URL作为其src属性的值。
2. 在服务端，处理该请求，并返回一个函数调用，该函数作为回调函数，将数据以参数的形式传递给前端应用。
3. 前端应用在加载完该<script></script>标签后，就可以获取到从服务端返回的数据。

以下是一个示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  window[callback] = function(data) {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  };
  document.body.appendChild(script);
}

function fetchUserData() {
  jsonp('http://api.example.com/user', 'handleUserData');
}

function handleUserData(data) {
  // 处理从服务端返回的数据
}

fetchUserData();

二、CORS

CORS（Cross-Origin Resource Sharing）是浏览器提供的一种跨域请求的解决方案，它通过在HTTP请求头中添加特定字段，实现跨域请求的权限控制。以下是使用CORS进行跨域请求的示例代码：

fetch('http://api.example.com/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*' // 设置允许跨域的域名
  },
})
.then(response => response.json())
.then(data => {
  // 处理从服务端返回的数据
})
.catch(error => {
  console.error(error);
});

在服务端，需要设置响应头中的Access-Control-Allow-Origin字段，指定允许跨域访问的域名。如果允许所有域名都跨域访问，可以设置该字段的值为*。

三、使用反向代理

另一种常见的解决跨域请求问题的方法是使用反向代理。具体步骤如下：

1. 在本地开启一个代理服务器，将目标服务器的请求转发到代理服务器上。
2. 再由代理服务器将请求发送到目标服务器，并将响应返回给前端应用。

这样，前端应用发送的请求就可以绕过浏览器的同源策略，实现了跨域请求。

以下是一个使用反向代理的示例代码：

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({ target: 'http://api.example.com', changeOrigin: true }));

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

通过上述代码，我们将/api开头的请求转发到了http://api.example.com

1. Dalam aplikasi bahagian hadapan, tambahkan teg <script></script> dan gunakan URL pelayan sebagai nilai srcnya atribut.
2. Di bahagian pelayan, proses permintaan dan kembalikan panggilan fungsi, yang berfungsi sebagai fungsi panggil balik dan menghantar data ke aplikasi bahagian hadapan dalam bentuk parameter.
3. Selepas memuatkan teg <script></script>, aplikasi bahagian hadapan boleh mendapatkan data yang dikembalikan daripada pelayan.

Berikut ialah contoh kod:

rrreee

2. CORS

CORS (Perkongsian Sumber Silang Asal) ialah penyelesaian permintaan merentas domain yang disediakan oleh penyemak imbas Ia menggunakan permintaan HTTP Tambah khusus medan ke pengepala untuk melaksanakan kawalan kebenaran untuk permintaan merentas domain. Berikut ialah contoh kod untuk menggunakan CORS untuk membuat permintaan merentas domain: 🎜rrreee🎜Di bahagian pelayan, anda perlu menetapkan medan Access-Control-Allow-Origin dalam pengepala respons untuk menentukan nama domain yang membenarkan akses merentas domain. Jika akses merentas domain dibenarkan untuk semua nama domain, nilai medan ini boleh ditetapkan kepada *. 🎜🎜3. Gunakan proksi terbalik🎜🎜Satu lagi cara biasa untuk menyelesaikan masalah permintaan merentas domain ialah menggunakan proksi terbalik. Langkah khusus adalah seperti berikut: 🎜

1. Buka pelayan proksi secara setempat dan majukan permintaan daripada pelayan sasaran ke pelayan proksi.
2. Pelayan proksi kemudiannya menghantar permintaan kepada pelayan sasaran dan mengembalikan respons kepada aplikasi bahagian hadapan.

🎜Dengan cara ini, permintaan yang dihantar oleh aplikasi bahagian hadapan boleh memintas dasar asal yang sama penyemak imbas dan melaksanakan permintaan merentas domain. 🎜🎜Berikut ialah contoh kod menggunakan proksi terbalik: 🎜rrreee🎜Dengan kod di atas, kami memajukan permintaan bermula dengan /api ke http://api.example.com. 🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan tiga penyelesaian untuk permintaan merentas domain React: JSONP, CORS dan menggunakan proksi terbalik. Dalam pembangunan sebenar, mengikut senario dan keperluan aplikasi tertentu, penyelesaian yang sesuai boleh dipilih untuk mengendalikan permintaan merentas domain. Saya berharap kandungan artikel ini akan membantu dalam menyelesaikan masalah permintaan merentas domain React. 🎜

Atas ialah kandungan terperinci React penyelesaian permintaan merentas domain: cara menangani isu akses merentas domain dalam aplikasi bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!