Tworzenie proxy w React/Webpack w celu wywołania zewnętrznego interfejsu API

Question

Chcę wysłać żądanie GET do zewnętrznego interfejsu API, którego nie kontroluję. Ze względu na bezpieczeństwo interfejsu API moja aplikacja reagowania nie może bezpośrednio wysłać żądania ajax do punktu końcowego. Dlatego staram się stworzyć prosty serwer proxy, jak wykazano here

My package.json file wygląda następująco:

{ 
    "name": "my-stack", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-router-dom": "^4.2.2", 
    "react-scripts": "1.0.13" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    }, 
    "proxy": { 
    "https://gold-feed.com/paid/*": { 
     "target": "https://gold-feed.com/paid", 
     "changeOrigin": true 
    } 
    } 
} 

I wtedy mój ajax żądanie wygląda następująco:

const apiUrl = 'https://gold-feed.com/paid/<apiID>/all_metals_json_usd.php'; 

jQuery.ajax({ 
    method: 'GET', 
    url: apiUrl, 
    success: (item) => { 
    this.props.addItem(item); 
    } 
}); 

Ale to nie robi” Wydaje się, że robisz cokolwiek. Ja wciąż otrzymuję następujący błąd:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. 

I zasadniczo mają ten sam problem, co zostało udokumentowane here gdzie on próbuje stworzyć serwer proxy do korzystania z interfejsu API parowej.

I tylko uwaga dodatkowa, uważam, że projekt typu "tworzenie-reakcja-aplikacja", którego używam, jest niedopasowany do pakietu internetowego.

Answer 1

Prawdopodobnie zorientowaliśmy się teraz, ale dla innych, oto co pracował dla mnie:

"proxy": { 
    "/proxy": { 
     "target": "https://mybackend.com", 
     "pathRewrite": {"^/proxy" : ""}, 
    "changeOrigin": true 
} 

tak myreact.com/proxy/my/path jest przekierowywany do mybackend.com/my/path

Myślę, że błąd w twoim przypadku jest to, że można umieścić miejsce docelowe jako klucz dla serwera proxy zamiast ścieżki na serwerze reagowania.