• 11-05-2024, 13:25:12
    #1
    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
    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 API’ye yönlendirerek browser’ın CORS politikasını atlatmanızı sağlar. Node.js’te 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
    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:
    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 API’ye yönlendirerek browser’ın CORS politikasını atlatmanızı sağlar. Node.js’te 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.
    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
    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
    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]