/ 在 URI 中的查询字符串之前添加答案

【问题标题】：/ being added before query string in URI/ 在 URI 中的查询字符串之前添加
【发布时间】：2020-08-10 19:42:37
【问题描述】：

我的 URI 和查询字符串具有以下格式，正如您今天早上看到的那样，它正在工作。

[api-deployment-dev-6b4f758c54-8rwxt api] [10/Aug/2020 10:44:22] "GET /survey/129/results/advanced_query?startingPage=12&dataView=By%20Position HTTP/1.1" 200 2

由于某种原因，尽管这是我今天更改的仅有的两个文件，但它还是停止了工作，而且我无法让它再次工作。我现在不断收到以下信息：

[api-deployment-dev-7cf59c8b8-b6p4k api] Bad Request: /api/survey/129/results/advanced_query/
[api-deployment-dev-7cf59c8b8-b6p4k api] [10/Aug/2020 12:38:54] "GET /survey/129/results/advanced_query/?startingPage=12&dataView=By%20Position HTTP/1.1" 400 0

似乎react，或axios，或其他东西正在查询字符串前添加/。为什么，我不确定，因为它今天早上没有这样做。

如何防止这种情况发生？

import React, { useState } from "react";
import {
  Button,
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  Input,
} from "reactstrap";

import axios from "axios";

const AdvancedQuerySurveyDataView = ({ surveyDataView }) => {
  const [startingPage, setStartingPage] = useState(null);
  const [option, setOption] = useState();

  const handleClick = async () => {
    const result = await axios({
      url: `/api/survey/${sessionStorage.getItem(
        "survey_id"
      )}/results/advanced_query?startingPage=${startingPage}&dataView=${option}`,
      method: "get",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
    });
  };

  return (
    <div className="results-position-list">
      <h5>
        <b>Select Survey Data View to Print</b>
      </h5>
      <select
        onChange={(e) => setOption(e.currentTarget.value)}
        id="position-list"
        className="form-control"
      >
        <option></option>
        {surveyDataView.map(({ surveydataview, min }) => (
          <option key={min} value={surveydataview}>
            {surveydataview}
          </option>
        ))}
      </select>
      <InputGroup>
        <InputGroupAddon addonType="prepend">
          <InputGroupText className="input-text">
            Enter Starting Page Number
          </InputGroupText>
        </InputGroupAddon>
        <Input
          type="number"
          min={0}
          max={100}
          step="1"
          onChange={(event) => setStartingPage(event.target.value)}
        />
        <InputGroupAddon addonType="append">
          <Button
            onClick={handleClick}
            disabled={
              startingPage > 0 && option !== undefined && option !== ""
                ? false
                : true
            }
          >
            Generate Section
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
};

export default AdvancedQuerySurveyDataView;

from django.urls import path

from .views import (
    GeneratePDFView
)

app_name = 'Results'

urlpatterns = [
    path('results/advanced_query',
         GeneratePDFView.as_view(), name='generate_pdf')
]

【问题讨论】：

React 不发出 ajax 请求，它只是一个 UI 库。该问题更可能与axios 或浏览器、服务器或其他来源有关，但极不可能是由 react 引起的。

标签： django reactjs django-rest-framework axios

【解决方案1】：

嗯，这让它在axios 中使用params 再次工作：

  const handleClick = async () => {
    const result = await axios({
      url: `/api/survey/${sessionStorage.getItem("survey_id")}/results/advanced_query`,
      method: "get",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      params: {
        startingPage: startingPage,
        dataView: option
      }
    });
  };

以前没有它也能正常工作，真是太奇怪了。

【讨论】：