简体   繁体   English

React Router使用我的URL请求到后端API

[英]React router consume my url request to back-end API

I'm building an SPA react-redux app at client-side, asp.net core back-end API. 我正在客户端asp.net核心后端API上构建SPA react-redux应用程序。 Everythings run perfectly with IISExpress when debugging. 调试时,一切都可以使用IISExpress完美运行。 But when I deploy to IIS as a web application nested default website with the alias "mysubdomain". 但是,当我作为Web应用程序部署到IIS时,嵌套的默认网站的别名为“ mysubdomain”。 Everything still runs ok except export function. 除导出功能外,其他所有操作均正常。

(1st case): Open browser, enter download API link: http://localhost/mysubdomain/api/v1/export?filterparam . (第一种情况):打开浏览器,输入下载API链接: http:// localhost / mysubdomain / api / v1 / export?filterparam A save dialogue open. 保存对话框打开。 That was my expectation. 那是我的期望。

(2nd case: normal case): open my site (homepage): http://localhost/mysubdomain then click export, a new window open by the link: http://localhost/mysubdomain/api/v1/export?filterparam . 第二种情况:正常情况):打开我的网站(主页): http:// localhost / mysubdomain,然后单击导出,通过链接打开一个新窗口: http:// localhost / mysubdomain / api / v1 / export?filterparam I was expecting that savefile popup opening similar to (1st case) but NO . 我期待的是类似于(第一种情况)的savefile弹出窗口打开,但是没有 Browse return my components/Layout rendered. 浏览返回我的组件/呈现的布局

I don't know what happening with react router/route? 我不知道反应路由器/路由会发生什么? Or I make something wrong? 还是我做错了什么? I guess that react-router just consume my URL-request then render my Component, instead of call to my back-end API. 我猜想react-router只会消耗我的URL请求,然后渲染我的组件,而不是调用我的后端API。

My export function inside redux store: 我在redux存储中的导出功能:

export: (filterParams) => async (dispatch, getState) => {
      const url = `api/v1/export?${filterParams}`;
      window.open(url,'_blank');
  }

Back-end API: 后端API:

[HttpGet]
[Route("download")]
public async Task<IActionResult> Download(DailyDischargeUrlQuery urlQuery)
{
  var stream = await _dailyDischargeRepository.ExportAsCsvStream(urlQuery.DischargeDate, urlQuery.MRN, urlQuery.GetCompanies(), urlQuery.GetOrders());

  return File(stream, "text/csv", "dailydischarge.csv");
}

index.js index.js

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);    
const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

registerServiceWorker();

App.js App.js

import 'core-js';
import React from 'react';
import {Route, Router} from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';

export default () => (
    <Layout>
        <Route exact path='/' component={Home}/>
    </Layout>
);

The problem has been resolved! 这个问题已经解决! That because of service worker built-in create-react-app. 这是因为服务人员内置了create-react-app。

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将代理请求响应到后端 API 以发起 Passport、Google OAuth2 请求 - React proxy request to back-end API to initiate Passport, Google OAuth2 request 为什么我的前端(react)和后端(express)没有连接 - why my front end(react) and back-end(express) is not connecting React/Redux 项目,通过我的 api 从后端返回空承诺 - React/Redux project, Empty promise being returned from back-end via my api 使用 useEffect hook React 向后端发出无休止的请求 - endless request to back-end using useEffect hook React 后端API在从前端发出请求时收到空的请求正文 - Back-end API receiving empty request body when making request from front-end 如何使用 React 前端和 Flask 后端处理 HTTP 请求 - How can I handle HTTP request with react front-end and flask back-end 无法从 React 前端向 Node.js 后端发送 POST 请求 - Can't send POST request from React front-end to Node.js back-end 使用 HTTP Post(RESTful API)将来自 React.JS 前端的请求传递到 C# 后端(ASP.NET) - Passing a Request from React.JS front-end to C# back-end (ASP.NET) using HTTP Post (RESTful API) 在 wordpress 后端反应 SPA 路由 - React SPA routing on wordpress back-end 基于输入和后端的React中的计算 - Calculation in React based on input and back-end
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM