Menguji sambungan antara bahagian hadapan React tempatan saya dan pelayan Node.JS

Question

Saya mencipta pelayan nod.JS Express yang menghantar JSON ke bahagian hadapan saya menggunakan API. Saya melengkapkan bahagian belakang dan meletakkannya pada pelayan AWS. Sekarang saya hanya mahu bekerja pada bahagian hadapan React. Saya mula bertindak balas pada localhost:3000 dan membuat permintaan kepada pelayan AWS, tetapi saya mendapat ralat CORS memberitahu saya bahawa localhost:3000 tidak mempunyai kebenaran untuk menghantar permintaan kepada pelayan itu.

从源“http://localhost:3000”获取“http://www.myawssever.fr:4000/api-url/”的访问已被 CORS 策略阻止：无“访问控制” -Allow-Origin'标头存在于请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

Saya telah mencuba pelbagai penyelesaian untuk membenarkan localhost:3000 tetapi saya tidak fikir masalah itu datang dari situ, kerana kepada pelayan localhost:3000 ialah alamatnya sendiri! Adakah anda tahu bagaimana saya boleh menguji belakang saya dari komputer saya (React on localhost:3000) dengan menghantar permintaan kepada pelayan (AWS)?

Answer 1

Berikut ialah langkah gabungan untuk menyelesaikan ralat CORS dan membolehkan komunikasi antara bahagian hadapan React dan pelayan AWS

在您的 AWS 服务器上配置 CORS

Pertama, anda perlu mengkonfigurasi pelayan untuk dijalankan 响应中包含适当的CORS标头. Anda perlu menambah pengepala "Access-Control-Allow-Origin" dengan nilai "http://localhost:3000" untuk membenarkan permintaan daripada aplikasi React anda.

配置CORS的具体方法

Kaedah tepat untuk mengkonfigurasi CORS bergantung pada teknologi pelayan yang anda gunakan (cth. Express, Apache, Nginx). Contohnya, jika anda menggunakan Express, anda boleh menggunakan perisian tengah cors. Berikut ialah contoh cara mengkonfigurasi CORS menggunakan Express:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));

// Rest of your server code...

app.listen(4000, () => {
  console.log('Server running on port 4000');
});

重新启动您的 AWS 服务器

Selepas mengkonfigurasi CORS, mulakan semula pelayan AWS untuk menggunakan perubahan.