Schakel CORS van front-end in reageer met Axios?

Ik gebruik reageer op de front-end en ik bel API van een ander domein dat ik niet bezit. Mijn AXIOS-aanvraag:

axios(requestURL, {
        method: 'GET',
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Authorization': key,
            withCredentials: true,
            mode: 'no-cors',
          }

Ik blijf dezelfde foutmelding krijgen: Cors Header ‘Access-Control-Toe-Origin’ Missing. Is dit iets dat ik kan overwinnen van de frontend? Ik weet voor een feit dat mensen die API gebruiken, zodat het geen backend-fout kan zijn, toch? Ik heb geprobeerd veel API’s te vragen en zelfs niet één werkte met mijn code. Ik heb geprobeerd https://cors-anywhere.herokuapp.com en het werkte prima voor als een week, Ik denk dat het vandaag neer is. Ik wil dat mijn site 24/7 verblijft, dus het gebruik van een proxy is geen optie

Antwoord 1, Autoriteit 100%

U moet helaas het verzoek op de een of andere manier proxy doen. CORS-aanvragen worden om veiligheidsredenen door de browser geblokkeerd. Om dit te voorkomen, moet backend injecteer de kop van de oorsprong voor u toe.

Oplossingen zijn afhankelijk van waar u moet proxy, dev of productie.

Development Environment of Node.js Production Webserver

De eenvoudigste manier om het in dit scenario te doen, is om de ‘HTTP-proxy-middleware’ NPM-pakket

te gebruiken

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(proxy('/api', {
        target: 'http://www.api.com',
        logLevel: 'debug',
        changeOrigin: true
    }));
};

Productie – Webserver waar u volledige toegang heeft
Kijk op de volgende pagina om te zien hoe u dergelijke proxy’s op uw webserver kunt inschakelen:

https://enable-cors.org/server.html

Productie – Statische hosting / webserver zonder volledige toegang

Als je hosting PHP ondersteunt, kun je een php-script toevoegen zoals: https://github.com/softius/php-cross-domain-proxy

Vervolgens een verzoek van uw app naar het script, dat het doorstuurt en headers invoegt bij het antwoord

Als je hosting geen PHP ondersteunt
Helaas zult u moeten vertrouwen op een oplossing zoals degene die u hebt gebruikt.

Om te voorkomen dat u afhankelijk bent van een service van derden, moet u ergens een proxyscript implementeren dat u gaat gebruiken.

Mijn suggesties zijn:

• Verplaats naar een hosting die php ondersteunt 🙂 (Netlify zou een oplossing kunnen zijn, maar ik weet het niet zeker)

• Je kunt bijvoorbeeld een op node.js gebaseerd proxyscript in Firebase implementeren (firebase-functies), om ervoor te zorgen dat het niet op magische wijze uitvalt, en het gratis abonnement kan mogelijk je aantal verzoeken aan.

• Maak een gratis Amazon AWS-account aan, waar je de kleinste instantie een jaar lang gratis krijgt, en voer daar een ubuntu-server met nginx-proxy uit.

Antwoord 2, autoriteit 14%

U moet CORS van back-end toestaan om verzoeken te doen.

Antwoord 3, autoriteit 14%

Men kan CORS-anywheregebruiken. Het is een NodeJS reverse proxy die CORS-headers toevoegt aan het proxyverzoek.

Als ik CORS wil toevoegen aan https://test-example.com, doe ik dat als volgt:

https://cors-anywhere-herokuapp.com/https://test-example.com