Nie ma nagłówka 'Access-Control-Allow-Origin' na żądanym zasobie-podczas próby pobrania danych z interfejsu API REST

Ten błąd występuje, gdy adres URL klienta i adres URL serwera nie pasują, w tym numer portu. W takim przypadku musisz włączyć usługę CORS, która jest cross origin resource sharing.

Jeśli prowadzisz usługę odpoczynku wiosennego, możesz go znaleźć w poście na bloguwsparcie CORS w Spring Framework.

Jeśli hostujesz usługę za pomocą węzła.js server then

1. Zatrzymaj węzeł.serwer js.
2. npm install cors --save

3. Dodaj następujące linie do serwera.js

   var cors = require('cors')
   
   app.use(cors()) // Use this after the variable declaration
   

Problem powstał, ponieważ dodałeś następujący kod jako wniosek header in your front-end:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

Te nagłówki należą do odpowiedź, nie Prośba. Więc Usuń je, w tym linię:

headers.append('GET', 'POST', 'OPTIONS');

Twoja prośba miała 'Content-Type: application/json', co wywołało tzw. inspekcję wstępną CORS. To spowodowało, że przeglądarka wysłała żądanie z metodą OPTIONS. Zobacz Kors preflight aby uzyskać szczegółowe informacje.

Dlatego w Twoim back-end , musisz obsłużyć to wstępnie podświetlone żądanie, zwracając nagłówki odpowiedzi zawierające:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

Oczywiście, rzeczywista składnia zależy od języka programowania, którego używasz w back-endzie.

W Twoim front-endzie powinno być tak:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

W moim przypadku używam poniższego rozwiązania

Przednie lub kątowe

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

Back-end (używam php)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

Używanie dataType: 'jsonp' zadziałało.

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

Tylko moje dwa centy... w związku z tym, jak używać serwera CORS proxy, aby ominąć problemy z nagłówkiem "No Access-Control-Allow-Origin header"

Dla tych z Was, którzy pracują z php w backendzie, wdrożenie "Cors proxy" jest tak proste, jak:

1. Utwórz plik o nazwie 'no-cors.php " o następującej treści:

   $URL = $_GET['url'];
   echo json_encode(file_get_contents($URL));
   die();
   

2. Z przodu zrób coś w stylu:

   fetch('https://example.com/no-cors.php' + '?url=' + url)
     .then(response=>{*/Handle Response/*})`
   

Usuń to:

credentials: 'include',

Pracowałem z SPRING REST i rozwiązałem to dodając AllowedMethods do WebMvcConfigurer.

@Value( "${app.allow.origins}" )
    private String allowOrigins;    
@Bean
public WebMvcConfigurer corsConfigurer() {
            System.out.println("allow origin: "+allowOrigins);
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                    //.allowedOrigins("http://localhost")
                    .allowedOrigins(allowOrigins)
                    .allowedMethods("PUT", "DELETE","GET", "POST");
                }
            };
        }

W moim przypadku serwer WWW zablokował metodę "OPTIONS"

Sprawdź serwer WWW pod kątem metody options

• Apache: https://www-01.ibm.com/support/docview.wss?uid=ibm10735209
• webtier : 4.4.6 wyłączanie metody Options https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174
• nginx: https://medium.com/@hariomvashisth/cors-on-nginx-be38dd0e19df

Używam "webtier"

/ www / webtier / domains/[domainname]/config/fmwconfig/components/OHS/VCWeb1 / httpd.conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

Zmień na

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

Jeśli używasz NodeJS / Express jako back-end i ReactJS / axios jako front-end w środowisku deweloperskim w systemie MacOS, musisz uruchomić obie strony pod https. Poniżej jest to, co w końcu zadziałało dla mnie (po wielu godzinach głębokiego nurkowania i testowania): {]}

Krok 1: Utwórz certyfikat SSL

Po prostu wykonaj kroki z Jak uruchomić HTTPS na lokalnym środowisku programistycznym w 5 minut

Skończysz z kilkoma plikami, które będą używane jako dane uwierzytelniające do uruchomienia serwera https i ReactJS web:

server.key & server.crt

Musisz skopiować je do folderów głównych zarówno z przodu, jak i z tyłu (w środowisku produkcyjnym możesz rozważyć ich skopiowanie ./ ssh dla back-endu).

Krok 2: Konfiguracja zaplecza

Czytałem wiele odpowiedzi sugerujących użycie pakietu 'cors' lub nawet ustawienie ('Access-Control-Allow-Origin','*'), co jest jak powiedzenie: "hakerzy są mile widziani na mojej stronie". Po prostu zrób tak:

import express from 'express';
const emailRouter = require('./routes/email');  // in my case, I was sending an email through a form in ReactJS
const fs = require('fs');
const https = require('https');

const app = express();
const port = 8000;

// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
app.all('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "https://localhost:3000");
    next();
});

// Routes definition
app.use('/email', emailRouter);

// HTTPS server
const credentials = {
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
};

const httpsServer = https.createServer(credentials, app);
httpsServer.listen(port, () => {
    console.log(`Back-end running on port ${port}`);
});

W jeśli chcesz przetestować, czy https jest OK, możesz zastąpić stałą httpsServer poniższą:

https.createServer(credentials, (req: any, res: any) => {
  res.writeHead(200);
  res.end("hello world from SSL\n");
}).listen(port, () => {
  console.log(`HTTPS server listening on port ${port}...`);
});

A następnie uzyskaj do niego dostęp z przeglądarki internetowej: https://localhost:8000/

Krok 3: Front-end setup

    await axios.get(`https://localhost:8000/email/send`, {
        params: {/* whatever data you want to send */ },
        headers: {
            'Content-Type': 'application/json',
        }
    })

A teraz musisz uruchomić sieć ReactJS w trybie https, korzystając z danych uwierzytelniających dla SSL, które już stworzyliśmy. Wpisz to w terminalu MacOS:

HTTPS=true SSL_CRT_FILE=server.crt SSL_KEY_FILE=server.key npm start

W tym momencie wysyłasz żądanie połączenia https na porcie 3000 z twojego front-endu, aby otrzymać połączenie https na porcie 8000 przez twój back-end. CORS powinien być z tego zadowolony;)

W Nodejs, jeśli używasz routerów, upewnij się, że dodajesz Kors przed routerami. W przeciwnym razie nadal dostaniesz błąd cors. Jak poniżej:

const cors = require('cors');

const userRouter = require('./routers/user');

expressApp = express();
expressApp.use(cors());
expressApp.use(express.json());
expressApp.use(userRouter);

Dodanie mode:no-cors pozwala uniknąć problemów z cors w api.

fetch(sign_in, {
        mode: 'no-cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

Spróbuj dodać wszystkie te nagłówki w poniższym kodzieprzed każdą trasą definiujesz w aplikacji, a nie po trasach

app.use((req, res, next) =>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type,Accept, Authortization');  
res.setHeader('Acces-Control-Allow-Methods','GET, POST, PATCH, DELETE');

Cześć @ daniel.lozynski . Access-Control-Allow-Origin jest jednym z najgorszych problemów, z jakimi borykają się twórcy stron internetowych podczas pracy z interfejsami API, a ja pracuję nad rozwiązaniami od dłuższego czasu.

Jednym ze sposobów na pozbycie się Access-Control-Allow-Origin jest użycie proxy. Oczywiście, proxy czasami mają swoje własne problemy.

1. jednym z ich problemów jest to, że spowalnia Twoje prośby.
2. kolejnym problemem jest to, że niektóre z tych proxy tworzą małą liczbę próśb do Ciebie w ciągu dnia, a czasami zostawiają cię z na Błąd. Oczywiście problem ten jest eliminowany przez przełączanie między serwerami proxy.

Są to jednak tylko chwilowe problemy i pojawiają się tylko podczas rozwoju.

Poniżej znajduje się lista najlepszych proxy jakie kiedykolwiek znaleziono.

1. https://cors-anywhere.herokuapp.com/
2. https://cors-proxy.htmldriven.com/?url=
3. https://thingproxy.freeboard.io/fetch/
4. https://thingproxy.freeboard.io
5. http://thingproxy.freeboard.io
6. http://www.whateverorigin.org/get?url=
7. http://alloworigin.com/get?url=
8. https://api./ align = "left" / win / get?url=
9. https://yacdn.org/proxy/

Ale jak korzystać z tych proxy?

Możesz łatwo wyposażyć API w proxy i pozbyć się Access-Control-Allow-Origin, dodając dowolny z tych adresów przed swoim adresem IP.

rozważ kilka przykładów poniżej:

• https://cors-anywhere.herokuapp.com/http://example.com/posts
• https://thingproxy.freeboard.io/fetch/http://example.com/blog/posts
• https://yacdn.org/proxy/http://example.com/blog/posts

Ważne:

Korzystanie z proxy jest ograniczone do interfejsów API online. I nie można używać proxy w lokalnych API. W dalszej części powiem ci, abyś odpowiedział również na lokalne API...

Więc co ja myślisz, że to najlepsze rozwiązanie?

Ostatnio natknąłem się na bardzo dobre rozszerzenie Chrome, które do tej pory nie miało dla mnie tych dwóch problemów z proxy i jestem z niego bardzo zadowolony, ponieważ go używałem.

Ale jedynym problemem z użyciem tej wtyczki jest to, że nie można już debugować projektu na telefonie komórkowym z adresem IP. To dlatego, że ta wtyczka tworzy tylko proxy w przeglądarce i nie wpływa już na transmisję danych przez kabel przez IP.

Możesz znaleźć i zainstalować tę wtyczkę z tego linku.

Allow CORS: Access-Control-Allow-Origin

Możesz po prostu zainstalować to rozszerzenie w przeglądarce Chrome i dobrze się bawić...!

Używanie tej wtyczki jest bardzo, bardzo proste i wystarczy ją zainstalować, a następnie aktywować. Jeśli jednak masz z tym problem, na stronie tej wtyczki w 'rozszerzenia Chrome', znajduje się film z YouTube, który całkowicie rozwiąże Twoje problemy, oglądając go.

Ponieważ moją ulubioną przeglądarką jest rozwijanie Chrome, nie szukałem rozwiązań dla innych rozszerzeń. Więc Jeśli używasz Chrome, Ta wtyczka będzie również bardzo przydatna dla Ciebie.