ReactJS'te CORS hatasını nasıl aşabilirim?

11-05-2024, 13:25:12

Kullanmam gereken bir API var, POSTMAN üzerinden başarılı bir şekilde aşağıdaki formatta bir yanıt alabiliyorum.

{
    "_links": {
        "next": {
            "href": "signals?start=100&limit=100&json=1"
        }
    },
    "_embedded": {
        "_state": [
            {
                "_links": {
                    "self": {
                        "href": "signals/ToolByPass_Active?json=1"
                    }
                },
                "_type": "signal-1",
                "_title": "ToolByPass_Active",
                "name": "DI_ToolByPass_Active",
                "type": "DI",
                "category": "",
                "lvalue": 0,
                "lstate": "not simulated"
            },
            {
                "_links": {
                    "self": {
                        "href": "signals/Tool5?json=1"
                    }
                },
                "_type": "signal-2",
                "_title": "Tool5",
                "name": "DI__Tool5",
                "type": "DI",
                "category": "",
                "lvalue": 0,
                "lstate": "not simulated"
            }
        ]
    }
}

Bu veriyi Axios eklentisini kullanarak map ile döndürüp tablo haline getirmeye çalışıyorum fakat CORS hatası alıyorum. Server tarafına müdahale etme şansım yok, API bana ait değil. API'yi aldığım yerden server taraflı bir işlem talebinde bulunamıyorum.

Bu hatayı aşabileceğim bir yöntem var mıdır?

11-05-2024, 13:40:18

#2

inancbusiness
CORS hatası, web uygulamalarının aynı kökende olmayan kaynaklardan veri almasını kısıtlayan bir güvenlik önlemidir. API sahibi CORS politikalarını değiştirmediği sürece, client tarafında bu sorunu aşmanın doğrudan bir yolu yoktur. Ancak bazı geçici çözüm yöntemleri vardır:
1. Proxy Sunucu Kullanımı: CORS politikasını aşmanın en yaygın yöntemlerinden biri, isteklerinizi bir proxy sunucu üzerinden yönlendirmektir. Bu, isteklerinizi kendi domaininiz üzerinden APIye yönlendirerek browserın CORS politikasını atlatmanızı sağlar. Node.jste bu tip bir proxy sunucu, http-proxy-middleware gibi paketlerle kolayca kurulabilir.
```
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
target: 'API_BASE_URL', // API'nizin base URL'si
changeOrigin: true,
pathRewrite: {
'^/api': '', // API istek path'ini yeniden yazmak için
},
}));

app.listen(3000); // Uygulamanın çalıştığı port
```
  Bu kod, gelen istekleri localhost:3000/api adresinden API'nizin base URL'ine yönlendirir.
2. Browser Eklentileri: Geliştirme aşamasında ise, bazı browser eklentileri (örneğin "Allow CORS: Access-Control-Allow-Origin") kullanarak CORS politikasını geçici olarak devre dışı bırakabilirsiniz. Ancak bu yöntem, sadece kişisel kullanım ve test amaçlı güvenlidir, üretim ortamında kullanılması önerilmez.
3. CORS Anywhere: CORS Anywhere gibi hizmetler, herhangi bir API için proxy sunucu olarak işlev görebilir. Bu tür hizmetler de geliştirme ve test amaçlı olarak kullanılabilir.
  javascriptCopy code
```
import axios from 'axios';

const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
const API_URL = 'API_BASE_URL/signals';

axios.get(`${PROXY_URL}${API_URL}`)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching the data:', error);
});
```
Bu yöntemlerden birini kullanarak CORS hatasıyla başa çıkabilirsiniz. Ancak unutmayın, bu geçici çözümler olup asıl çözüm, API sağlayıcısının CORS politikasını güncellemesidir.
11-05-2024, 13:45:10

#3

Xugart
inancbusiness adlı üyeden alıntı: mesajı görüntüle
CORS hatası, web uygulamalarının aynı kökende olmayan kaynaklardan veri almasını kısıtlayan bir güvenlik önlemidir. API sahibi CORS politikalarını değiştirmediği sürece, client tarafında bu sorunu aşmanın doğrudan bir yolu yoktur. Ancak bazı geçici çözüm yöntemleri vardır:
Proxy Sunucu Kullanımı: CORS politikasını aşmanın en yaygın yöntemlerinden biri, isteklerinizi bir proxy sunucu üzerinden yönlendirmektir. Bu, isteklerinizi kendi domaininiz üzerinden APIye yönlendirerek browserın CORS politikasını atlatmanızı sağlar. Node.jste bu tip bir proxy sunucu, http-proxy-middleware gibi paketlerle kolayca kurulabilir.

const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); app.use('/api', createProxyMiddleware({ target: 'API_BASE_URL', // API'nizin base URL'si changeOrigin: true, pathRewrite: { '^/api': '', // API istek path'ini yeniden yazmak için }, })); app.listen(3000); // Uygulamanın çalıştığı port
Bu kod, gelen istekleri localhost:3000/api adresinden API'nizin base URL'ine yönlendirir.

Browser Eklentileri: Geliştirme aşamasında ise, bazı browser eklentileri (örneğin "Allow CORS: Access-Control-Allow-Origin") kullanarak CORS politikasını geçici olarak devre dışı bırakabilirsiniz. Ancak bu yöntem, sadece kişisel kullanım ve test amaçlı güvenlidir, üretim ortamında kullanılması önerilmez.

CORS Anywhere: CORS Anywhere gibi hizmetler, herhangi bir API için proxy sunucu olarak işlev görebilir. Bu tür hizmetler de geliştirme ve test amaçlı olarak kullanılabilir.
javascriptCopy code

import axios from 'axios'; const PROXY_URL = 'https://cors-anywhere.herokuapp.com/'; const API_URL = 'API_BASE_URL/signals'; axios.get(`${PROXY_URL}${API_URL}`) .then(response => { console.log(response.data); }) .catch(error => { console.error('Error fetching the data:', error); });

Bu yöntemlerden birini kullanarak CORS hatasıyla başa çıkabilirsiniz. Ancak unutmayın, bu geçici çözümler olup asıl çözüm, API sağlayıcısının CORS politikasını güncellemesidir.
Detaylı yanıtınız için teşekkür ederim. API sağlayıcısının sırf ben kullanacağım diye CORS politikasını güncellemesi maalesef mümkün değil çünkü çok büyük ve endüstriyel bir firma ve yaklaşık 10 yıldır olduğu şekliyle çalışan bir API bu. Bu yüzden benimde olduğu şeklini kabul etmem gerekiyor. PROXY olayını denemiştim ama yapamamıştım, tekrar bakacağım buna. Sanırım en mantıklısı PROXY sunucusu gibi duruyor.
11-05-2024, 13:47:48

#4

inancbusiness

Xugart adlı üyeden alıntı: mesajı görüntüle

Detaylı yanıtınız için teşekkür ederim. API sağlayıcısının sırf ben kullanacağım diye CORS politikasını güncellemesi maalesef mümkün değil çünkü çok büyük ve endüstriyel bir firma ve yaklaşık 10 yıldır olduğu şekliyle çalışan bir API bu. Bu yüzden benimde olduğu şeklini kabul etmem gerekiyor. PROXY olayını denemiştim ama yapamamıştım, tekrar bakacağım buna. Sanırım en mantıklısı PROXY sunucusu gibi duruyor.

evet proxy için youtube dan videolar bulabilirsin bencede proxy daha bir kolay yol gibi. iyi çalışmalar.
11-05-2024, 13:55:15

#5

kazimolmez
Ben zamanında bu linkte sayfanın en altında ki kod gibi bir yöntem kullanmıştım sende bi deneyebilirsin

https://create-react-app.dev/docs/pr...n-development/

NuxtJS de kullandığım axios configi de aşağıda ki gibiydi
```
publicRuntimeConfig: {
    axios: {
      baseURL: config.apiUrl + '/api',
    },
  },
  axios: {
    proxy: true,
  },
  proxy: {
    '/laravel': {
      target: 'https://laravel-auth.nuxtjs.app',
      pathRewrite: { '^/laravel': '/' },
    },
  }
[B][/B]
```