Solusi Mengatasi masalah CORS Secara Permanen

Apa pun jenis aplikasi web yang Anda buat, jika Anda ingin mempelajari cara memperbaiki masalah CORS secara permanen, Anda telah datang ke tempat yang tepat. Aplikasi JavaScript front-end saja (React, Vue, Angular).

Misalkan Anda ingin mendapatkan data dari API server eksternal seperti Google Maps API dari aplikasi sisi klien, seperti pada kode berikut.

fetch("https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOUR_API_KEY]")
.then(response => {
   console.log(response);
})

Ketika saya menjalankan kode di atas, saya mendapatkan kesalahan CORS.

Jika Anda ingin mengetahui isi, alasan dan metode CORS, silakan klik di sini. Gunakan salah satu server proxy CORS publik untuk perbaikan cepat. Contoh ini menggunakan server proxy Heroku CORS.

Tambahkan server proxy ke URL API. https://cors-anywhere.herokuapp.com

Anda mungkin masih mendapatkan kesalahan 403 terlarang bahkan setelah menambahkan URL proxy Heroku CORS.

Untuk memperbaikinya, Anda harus mengunjungi URL berikut untuk meminta akses sementara ke server proxy Heroku.

https://cors-anywhere.herokuapp.com/corsdemo

Aplikasi web khusus server Node.js

Jika Anda mengirim permintaan HTTP dari server ke API server eksternal (dalam kasus saya, saya menggunakan Google Maps API) alih-alih klien, kesalahan CORS ditangani murni oleh browser dan dapat ditangani tanpa masalah. permintaan HTTP.

Luncurkan dan jalankan aplikasi NodeJS Express dalam 1 menit (2022)

const { default: axios } = require('axios');
const express = require('express');
const app = express();app.get("/", (req, res) => {
    axios.get('https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJryijc9s0K4gRG9aU7SDTXdA&key=[YOUR_API_KEY]')
        .then(function (response) {
            res.send(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
});app.listen(3000);

Aplikasi server klien

Mari kita bicara tentang cara memperbaiki masalah CORS saat membuat aplikasi web yang memisahkan aplikasi front-end dari API sisi server.

Tetap jalankan permintaan Google Maps API dalam kode sisi server di localhost:3000.

Kemudian ubah URL permintaan fetch klien dari URL Google Maps API menjadi localhost:3000.

fetch("http://localhost:3000/")
.then(response => {
   console.log(response);
})

Itu juga melempar kesalahan CORS yang sama seperti sebelumnya.

Untungnya, kesalahan CORS berasal dari server saya yang berjalan di localhost:3000, bukan dari server pihak ketiga seperti Google Maps API yang tidak dapat saya kendalikan untuk mengubah kode backend.

Untuk memperbaikinya, Anda perlu menambahkan header respons yang disebut Access-Control-Allow-Origin ke aplikasi sisi server Anda yang meneruskan URL sisi klien yang ingin Anda izinkan aksesnya.

Dalam kasus saya, saya menjalankan aplikasi sisi klien di localhost: 5501 atau 127.0.0.1:5501

Artinya, tidak ada aplikasi web klien lain yang dapat menggunakan server untuk mengambil data API eksternal (dalam hal ini Google Maps API). Ini berarti bahwa alih-alih menggunakan pihak ketiga seperti Heroku, Anda telah membuat server proxy CORS Anda sendiri.


app.get("/", (req, res) => {
     ...
     .then(function (response) {
        res.header("Access-Control-Allow-Origin", "http://localhost:5501"); // update to match the domain you will make the request from
        res.send(response.data);
      })
     ...
});

Dengan cara ini, kesalahan CORS diperbaiki secara permanen dan tidak pernah ditampilkan lagi. Penyebaran

Jika Anda tidak khawatir dengan domain kustom, Anda dapat menggunakan layanan seperti Firebase untuk menerapkan aplikasi sisi server dan klien dengan cepat secara gratis.

Anda dapat menggunakan hosting Firebase untuk penerapan front-end. Menerapkan aplikasi Node.js memungkinkan Anda memindahkan kode ke Firebase Cloud Function untuk penerapan.

Jika Anda memiliki pertanyaan atau masalah, beri tahu kami di bagian komentar di bawah.

Solusi Mengatasi masalah CORS Secara Permanen

Artikel Lainnya :