我的React应用程序在localhost:3000上启动,而节点服务器在localhost:5000上运行。 当我尝试连接Express API时,路由将转到“ localhost:3000 / auth / google”,而不是localhost:5000 / auth / google
UserAction.js
export const updateLoginUser = (userData, scheme) => async dispatch => { console.log(scheme); if(scheme === 'google') { // TODO: fetch user from the DB const fetchedUser = await axios.post('/auth/google'); dispatch({ type: UPDATE_USER, payload: fetchedUser.data }) } else { // TODO: fetch user from the DB const fetchedUser = await axios.post('/api/get_user/', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(userData) }) dispatch({ type: UPDATE_USER, payload: fetchedUser.data }) }
}
setupProxy.js
const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use(proxy('/auth/google', { target: 'http://localhost:5000' })) }
NODE server.js
const express = require('express'); const mongoose = require('mongoose'); const keys = require('./config/keys'); const cookieSession = require('cookie-session'); const passport = require('passport'); const cors = require('cors'); const morgan = require('morgan'); require('./models/Users'); require('./services/passport'); // it is not returing anything hence no need of assigning mongoose.connect(keys.mongoDBURI, { useNewUrlParser: true, useUnifiedTopology: true }); const app = express(); app.use(cors()); // Setup the cookie session app.use(cookieSession({ maxAge: 30 * 24 * 60 * 1000, // Time till the cookie will be alive keys: [keys.cookieKey] })); app.use(morgan('combined')); // Make passport know to use the cookieSession app.use(passport.initialize()); app.use(passport.session()); require('./routes/authRoutes')(app); // authRoute returing a function and we are immediatly invoking that function const PORT = process.env.PORT || 5000; app.listen(5000);
编辑:反应package.json
{ "name": "blogpost-frontend", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", "http-proxy-middleware": "^0.20.0", "node-sass": "^4.13.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-redux": "^7.1.3", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0", "redux": "^4.0.4", "redux-thunk": "^2.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "proxy": "http://localhost:5000" }
我对此并不陌生,因此我不知道代理是如何工作的。