विकास मोड में सब कुछ ठीक काम करता है। पहली नज़र में ऐप बिल्ड मोड में समान है (मैं सर्वर साइड के लिए एक्सप्रेस का उपयोग कर रहा हूं)। लेकिन जब मैं अपने पृष्ठ को रीफ्रेश करने का प्रयास करता हूं (यूआरएल में पैराम्स होते हैं) मुझे केवल प्राप्त होता है

{
surveyString: "[{"type":"radiogroup","name":"Favorite Character?","title":"Favorite Character?","isRequired":true,"colCount":1,"choices":["Walt","Hank","Jesse","Mike"]},{"type":"radiogroup","name":"Favorite Actor?","title":"Favorite Actor?","isRequired":true,"colCount":1,"choices":["Aaron Paul","Bryan Cranston","Jonathan Banks"]}]",
surveyTitle: "Breaking Bad Survey"
}

जो सर्वर से प्रतिक्रिया भेजता है, जो निश्चित रूप से मैं चाहता हूं, लेकिन किसी भी तरह ऐप इसे शामिल नहीं करता है।

त्रुटि जो मुझे क्रोम में प्राप्त होती है वह है

स्थानीय संसाधन लोड करने की अनुमति नहीं है: देखें-स्रोत

फ़ायरफ़ॉक्स में त्रुटि किसी तरह अलग दिखती है

सामग्री सुरक्षा नीति: पृष्ठ की सेटिंग ने एक संसाधन ...संसाधन लिंक... की लोडिंग को अवरुद्ध कर दिया है

इन त्रुटियों के माध्यम से मैंने सामग्री सुरक्षा नीति के बारे में स्वीकार किया, कुछ बुनियादी तरीका है कि कैसे एक्सप्रेस पैकेज इसे दूर करने के लिए काम करता है और इसी तरह ... लेकिन यह अलग कहानी है और मुझे आशा है कि मैं प्रतिक्रिया पक्ष पर समस्या का समाधान करूंगा।

मैं आशावादी हूं क्योंकि मेरे पास अन्य पृष्ठ पर एक href लिंक से समान व्यवहार है। जब मैं aHref को LinkTo ऐप से प्रतिस्थापित करता हूं तो अपवाद के रूप में काम करता है।

मैं लिंक पर क्लिक करता हूं और एक नए पेज पर सब कुछ ठीक है, जब तक मैं रीफ्रेश नहीं करता।

लिंक जीथब पेज के लिए है: कंपोनेंट जो रिफ्रेश नहीं रहता

function SingleSurvey(props) {
  const [complete, setComplete] = useState(false);
  const [voted, setVoted] = useState(false);
  const [json, setJson] = useState({});
  const [title, setTitle] = useState("");
  const [resultsDisplay, setResultsDisplay] = useState(false);

  const { id } = useParams();

  useEffect(() => {
    surveyServices.getSingle(id).then((res) => {
      const stringQuestions = JSON.parse(res.surveyString);
      setJson({ questions: stringQuestions });
      setTitle(res.surveyTitle);
    });
  }, [id]);

  useEffect(() => {
    const checkItem = window.localStorage.getItem(`chartVoted-${id}`);
    if (checkItem) {
      setVoted(true);
    }
    // eslint-disable-next-line
  }, []);

  function onComplete(result) {
    surveyServices.updateVotes({
      data: result.data,
      id,
    });
    window.localStorage.setItem(`chartVoted-${id}`, true);
    setComplete(true);
    setTimeout(() => {
      window.location.reload();
    }, 1100);
  }
  return (
    <main className="survey-page">
      {complete && <p className="survey-finished"></p>}
      {!voted ? (
        <>
          <Survey.Survey
            json={json}
            showCompletePage={false}
            onComplete={(result) => onComplete(result)}
          />
          <div className="show-results">
            <button
              className="btn-results"
              onClick={() => setResultsDisplay(!resultsDisplay)}
            >
              {resultsDisplay ? "Hide Charts" : "Show Charts"}
            </button>
            <div
              className="visible-results"
              style={{ display: resultsDisplay ? "" : "none" }}
            >
              <Result id={id} title={title} />
            </div>
          </div>
        </>
      ) : (
        <div className="just-results">
          <Result id={id} title={title} />
        </div>
      )}
    </main>
  );
}
export default SingleSurvey;

मार्ग सेटिंग स्विच करें

<Router>
      <Notification />
      <Switch>
        <Route exact path="/api/survey/single/:id" component={SingleSurvey} />
      </Switch>
</Router>

ReactDOM रेंडर, मैं मूल redux का उपयोग कर रहा हूँ

<Provider store={store}>
    <App />
</Provider>,

व्यक्त करना

app.use(express.static(path.join(__dirname, "build")));
app.use("/api/survey", surveyController);
app.use("/api/users", usersController);
app.use("/api/login", loginController);

app.get("/", function (req, res) {
  app.get("/*", function (req, res) {
    res.sendFile(path.join(__dirname, "build", "index.html"));
  });
});

यदि आप सीधे समस्या देखना चाहते हैं एप उसकेोकू पर अपलोड किया गया है

मुझे आशा है कि मुझे कोई मूल्यवान जानकारी नहीं मिली है। किसी को भी पता है कि अविश्वसनीय रूप से कष्टप्रद समस्या को कैसे ठीक किया जाए?

0
Nikola Golubović 18 सितंबर 2020, 01:19
आप नेस्टेड ऐप का उपयोग क्यों कर रहे हैं। कॉल प्राप्त करें?
 – 
Alex Mckay
18 सितंबर 2020, 02:36
मैं त्रुटि को फिर से नहीं बना सकता, त्रुटि का कारण बनने वाले सटीक चरण क्या हैं?
 – 
Alex Mckay
18 सितंबर 2020, 02:39
मैं नेस्टेड कॉल का उपयोग करता हूं क्योंकि मैंने create-react का अनुसरण किया है -ऐप दस्तावेज़। मैंने नेस्टेड समाधान की भी कोशिश नहीं की और परिणाम वही था। त्रुटि को फिर से बनाने के लिए आपको मेरे होमपेज और रीफ्रेश पेज से एकल सर्वेक्षण पर जाना होगा या आप बस यहां क्लिक करें
 – 
Nikola Golubović
18 सितंबर 2020, 03:01
क्या यह आपके काम आया?
 – 
Alex Mckay
18 सितंबर 2020, 04:27

2 जवाब

सबसे बढ़िया उत्तर

आपने भ्रमित किया है और परिणामस्वरूप आपके एपीआई मार्गों और आपके ग्राहक पक्ष मार्गों को अधिभारित कर दिया है।

जब वेब ब्राउज़र किसी वेबसाइट पर जाते हैं तो वे GET अनुरोध कर रहे होते हैं, ठीक उसी तरह जैसे आप अपने एक्सप्रेस सर्वर के साथ इंटरैक्ट करते हैं।

यहां आपकी समस्या यह है कि आप अपने उपयोगकर्ताओं को अपने सर्वर एंडपॉइंट पर पुनर्निर्देशित करके गलती से अपने सर्वर से अनुरोध प्राप्त कर रहे हैं जो आपके सर्वर पर जीईटी अनुरोध करता है।

क्या हो रहा है

  • Link घटक द्वारा ट्रिगर किया गया यूआरएल परिवर्तन (आपके द्वारा प्रदान किए गए कोड में नहीं

  • रिएक्ट राउटर एपीआई अनुरोध को ट्रिगर किए बिना यूआरएल से मेल खाता है (इस तरह सिंगल पेज वेब ऐप काम करता है) <Route exact path="/api/survey/single/:id" component={SingleSurvey} />

  • पृष्ठ पर ताज़ा करें एक्सप्रेस URL से मेल खाता है और index.html के बजाय API प्रतिक्रिया देता है app.use("/api/survey", surveyController);

समाधान

  • अपने क्लाइंट-साइड पथ को कुछ इस तरह बदलें: /client/survey
1
Alex Mckay 18 सितंबर 2020, 03:11
एलेक्स, आप मददगार से ज्यादा थे। आपके सुझाव और थोड़े और काम से मैंने किसी तरह समस्या का समाधान किया। श्रीमान धन्यवाद।
 – 
Nikola Golubović
18 सितंबर 2020, 16:51

एलेक्स मैके के उत्तर के बाद मैं मार्ग स्थान बदलता हूं

 <Route
    exact
    path="/client/survey/single/:id"
    component={SingleSurvey}
  />

और मेरे सर्वर साइड पर सामग्री सुरक्षा नीति त्रुटि को ठीक करने के बजाय। यह मेरे लिए बिल्कुल नया क्षेत्र है इसलिए मैं अपने कंसोल में त्रुटियों का पालन करता हूं और इसे एक-एक करके ठीक करता हूं। यह [हेलमेट-सीएसपी] पैकेज के साथ अत्यधिक सहज प्रक्रिया है।

app.use(
  csp({
    directives: {
      defaultSrc: ["'self'"],
      fontSrc: ["https://fonts.googleapis.com/", "https://fonts.gstatic.com"],
      connectSrc: ["'self'", "http://localhost:3005"],
      styleSrc: [
        "'self'",
        "'unsafe-inline'",
        "https://surveyjs.azureedge.net/1.8.0/modern.css",
        "https://fonts.googleapis.com",
        "'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='",
        "'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o='",
      ],
      imgSrc: ["'self'", "http://localhost:3005"],
      scriptSrc: [
        "'self'",
        "unsafe-inline",
        "'sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='",
      ],
      objectSrc: ["'none'"],
      upgradeInsecureRequests: [],
    },
    reportOnly: false,
  })
);

इसके अलावा, मैंने अपने एक घटक से इनलाइन शैली को हटा दिया क्योंकि घटक ने अजीब व्यवहार किया

<>
          <Survey.Survey
            json={json}
            showCompletePage={false}
            onComplete={(result) => onComplete(result)}
          />
          <div className="show-results">
            <button
              className="btn-results"
              onClick={() => setResultsDisplay(!resultsDisplay)}
            >
              {resultsDisplay ? "Hide Charts" : "Show Charts"}
            </button>
            {resultsDisplay && (
              <div>
                <Result id={id} title={title} />
              </div>
            )}
          </div>
</>

और यह काम करता है।

0
Nikola Golubović 18 सितंबर 2020, 17:42