Question

我有一个反应前端，只对应用程序的Rails API进行API调用。我在package.json上有代理配置，如下所示：

 {
  "name": "client",
  "version": "0.1.0",
  "private": true,
  **"proxy": "http://localhost:3001",**
  "dependencies": {
    "globalize": "^1.3.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "react": "^16.2.0",
    "react-big-calendar": "^0.17.0",
    "react-dom": "^16.2.0",
    "react-globalize": "^0.4.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.0",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "semantic-ui-css": "^2.2.12",
    "semantic-ui-react": "^0.77.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我正在从Rails应用程序中使用fetch来检索数据：

export const eventsFetch = () => {
    //console.log('estoy en productsFetch!');
    return (dispatch) => {
        dispatch({ type: EVENTS_FETCHING });
        **window.fetch('api/v1/events')**
          .then(response => response.json())
          .then(response => {
              dispatch({ type: EVENTS_FETCH_SUCCESS, payload: response });
          })
          .catch(error => {
              dispatch({ type: EVENTS_FETCH_FAILURE, payload: error })
          })
    };
};

export const upcomingEventsFetch = (page = 1) => {
    //console.log('estoy en productsFetch!');
    return (dispatch) => {
        dispatch({ type: EVENTS_FETCHING });
        **window.fetch('api/v1/events/upcoming?page=' + page)**
          .then(response => response.json())
          .then(response => {
              dispatch({ type: EVENTS_FETCH_SUCCESS, payload: response });
          })
          .catch(error => {
              dispatch({ type: EVENTS_FETCH_FAILURE, payload: error })
          })
    };
};

export const detailedEventFetch = (eventId) => {
    //console.log('estoy en productsFetch!');
    return (dispatch) => {
        dispatch({ type: EVENTS_FETCHING });
        **window.fetch('api/v1/events/' + eventId)**
          .then(response => response.json())
          .then(response => {
              dispatch({ type: EVENTS_FETCH_SUCCESS, payload: response });
          })
          .catch(error => {
              dispatch({ type: EVENTS_FETCH_FAILURE, payload: error })
          })
    };
};

在这3个API调用中，第1个工作正常，他们对http://localhost:3001/api/v1/进行api调用...

但第三个是将请求发送给http://localhost:3001/events/api/v1/ ... 它正在添加事件路径，它是根据ReactRouterDom配置的客户端路径：

import React from 'react'
import { Switch, Route, Link } from 'react-router-dom'
import Header from './Header';
import EventsCalendar from './EventsCalendar';
import EventDetail from './EventDetail';
import Footer from './Footer';
import NavMenu from './NavMenu';

// The Main component renders one of the three provided
// Routes (provided that one matches). Both the /roster
// and /schedule routes will match any pathname that starts
// with /roster or /schedule. The / route will only match
// when the pathname is exactly the string "/"
const Main = () => (
  <main>
    <NavMenu>
      {/* <Header/> */}
      <Switch>
        **<Route exact path='/events' component={ EventsCalendar } />
        <Route path='/events/:eventId' component={ EventDetail } />**
      </Switch>
      </NavMenu>
      <Footer />

  </main>
)

export default Main

任何人都可以帮我解决这个问题。感谢。

每次使用代理URL时，React api调用都不起作用

0 个答案: