Me gustaría tener un proxy en mi cliente de reacción, mi paquete.json contiene:
... "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "proxy": { "/auth/google": { "target": "http://localhost:5000" } }, ...Pero cuando lo ejecuté, recibí un error.
When specified, "proxy" in package.json must be a string. [1] Instead, the type of "proxy" was "object". [1] Either remove "proxy" from package.json, or make it a string.Traté de convertir a cadena, no hubo errores pero el proxy no funciona
"proxy": "http://localhost:5000"Mi aplicación.js
<div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>hey there</p> <a href="/auth/google">Sign In With Google</a> </header> </div>El problema al que se enfrenta se debe a CRA v2 .
En primer lugar, no necesitará ninguna configuración adicional si solo está utilizando una cadena simple en su proxy. Pero en el momento en que usa un objeto, está usando una configuración avanzada.
Por lo tanto, tendría que seguir los pasos que se detallan a continuación:
Instale http-proxy-middleware escribiendo npm i --save http-proxy-middleware
Elimina las entradas de package.json:
"proxy": { "/auth/google": { "target": "http://localhost:5000" } } const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/auth/google', { target: 'http://localhost:5000/' } )); }para más información revisa esto
Creo que es un problema de "crear-reaccionar-aplicación".
Puede ir a https://github.com/facebook/create-react-app/issues/5103 para migrar al nuevo método de manejo de proxy.
Para abreviar, solo necesita instalar una nueva biblioteca llamada "http-proxy-middleware"
npm install http-proxy-middleware --saveY luego cree un nuevo archivo "src/setupProxy.js" y escriba
const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/auth/google', { target: 'http://localhost:5000/' })); };Espero que esto pueda resolver tu problema, ¡feliz piratería!
Primero, instale http-proxy-middleware usando npm o Yarn:
$ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middlewareA continuación, cree src/setupProxy.js y coloque los siguientes contenidos en él:
const proxy = require('http-proxy-middleware') module.exports = function(app) { // ... }Ahora, migre cada entrada en su objeto proxy una por una, por ejemplo:
"proxy": { "/api": { "target": "http://localhost:5000/" }, "/*.svg": { "target": "http://localhost:5000/" } } Coloque las entradas en src/setupProxy.js así:
const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use(proxy('/api', { target: 'http://localhost:5000/' })) app.use(proxy('/*.svg', { target: 'http://localhost:5000/' })) }¡También puede usar una lógica completamente personalizada allí ahora! Obtuve esta respuesta funcional de este enlace y, por lo tanto, comparto: https://github.com/facebook/create-react-app/issues/5103