[JAVA] ◆ Rufen Sie die von Spring Boot erstellte API von React ab

★ Einführung

Ich studiere auch Node.js und React parallel zum Studium von Spring, aber der Fortschritt ist langsam, wahrscheinlich weil die Vorderseite nicht gut darin ist. Wie üblich handelt es sich um einen Artikel mit Arbeitsnotizen und Studienunterlagen.

★ Was Sie tun möchten

Betreff Mutter. ◆ Versuchen Sie, die SpringBoot + Gradle REST + JSON-Format-API aufzurufen Implementieren Sie den Prozess des Aufrufs der in Schritt 1 erstellten API auf der Vorderseite.

Übrigens entwickeln wir im Geschäftsleben hauptsächlich APIs auf der Basis des Servers und unseres eigenen Frameworks. Obwohl ich Erfahrung in der Implementierung des Aufrufs von APIs aus einem Stapel habe, habe ich nicht viel Erfahrung in der Implementierung des Aufrufs von APIs von der Vorderseite und vom Bildschirm aus. Daher war es eine gute Studie.

★ API-Seite (SpringBoot)

RestApiController.java

package com.example.sample.app.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.example.sample.app.resource.BirthStone;

@RestController
@CrossOrigin(origins = "*") //★ Änderungen
@RequestMapping("api/sample")
public class RestApiController {
    
    @RequestMapping(value = "/getBirthStone", method = RequestMethod.GET)
    @ResponseBody
    public BirthStone getBirthStone() {
        BirthStone birthStone = new BirthStone("Februar", "Amethyst", "lila");
        return birthStone;
    }
}

Beim tatsächlichen Anruf vom Bildschirm ** "Blockierte Ursprungsübergreifende Anforderung: Dieselbe Ursprungsrichtlinie weigert sich, Remote-Ressourcen unter [* API-URL] zu laden (Grund: Fehlender CORS-Header 'Zugriffssteuerung-Zulassen-Ursprung'") ). [Einzelheiten] "** Was für eine Fehlermeldung wurde an die Konsole ausgegeben, also dachte ich, es sei ein Fehler mit ** CORS **. Ich habe das Wort CORS zum ersten Mal gelernt, weil ich nicht studiert habe. Ich habe es noch nicht herausgefunden, also plane ich zu einem späteren Zeitpunkt zu studieren. Ich würde gerne einen Artikel schreiben, wenn ich die freie Kapazität habe.

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/CrossOrigin.html

CORS kann durch Hinzufügen der Annotation @ CrossOrigin gesteuert werden. Setzen Sie "*" (Platzhalter) für "Ursprünge" (Access-Control-Allow-Origin).

Starten Sie lokal. Der Port ist der Standard 8080.

★ Bildschirmseite (Reagieren)

//Projekterstellung
create-react-app call_api_sample
//Zum Projekt wechseln
cd  call_api_sample
// node-Installieren Sie fetch
npm install --save node-fetch
//Serverstart
npm start

Ich habe ein Projekt erstellt und installiert, weil ich die Fetch-API verwenden wollte. Starten Sie den Server. Der Standardport ist 3000.

App.js

import React, { Component } from 'react';
import fetch from 'node-fetch';
import './App.css';

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      month: '',
      name: '',
      color: ''
    }
  }
  componentWillMount () {
    const URL = 'http://localhost:8080/api/sample/getBirthStone'
    fetch(URL, {mode: 'cors'})
    .then(res => res.json())
    .then(json => {
      this.setState({
        month: json['month'],
        name: json['name'],
        color: json['color']
      })
    });
  }

  render() {
    return <div className='App'>
      month: {this.state.month} <br />
      name: {this.state.name} <br />
      color: {this.state.color} <br />
    </div>
  }
}

export default App;

Ich habe darüber nachgedacht, eine weitere js-Datei zu erstellen, aber es war nur eine einfache Kommunikationsbestätigung, also habe ich App.js neu geschrieben.

Der Monat, der Name und die Farbe werden mit "Konstruktor" initialisiert (leer).

Die API wird von componentWillMount (Prozess, der vor der Komponentenerstellung ausgeführt wird) aufgerufen, und die Antwortwerte werden in Monat, Name und Farbe gepackt. Stellen Sie "mode" auf "cors", um CORS zu unterstützen.

★ Ausführungsergebnis

http://localhost:3000/ Wenn Sie zugreifen ...

Der Antwortwert der API wird auf dem Bildschirm angezeigt.

★ Referenz

Beim Schreiben dieses Artikels habe ich auf die folgenden Bücher und Artikel verwiesen.

Entwicklungstechniken für Node.js und React-Anwendungen für moderne JS-Programmierer

CORS-Zusammenfassung [JavaScript-Grundlagen] API-Grundlagen abrufen - KDE BLOG Abruf in Node.js aktivieren Prost auf gute Arbeit XMLHttpRequest, Hallo holen