Как получить доступ к Spring Boot API в React JS - PullRequest
Новая
       18

Как получить доступ к Spring Boot API в React JS

0 голосов
/ 11 апреля 2019

Я пытаюсь получить доступ к своему твиттер-интерфейсу всякий раз, когда я отправляю ключевое слово в форму поиска на реагировать JS. Работает весенний загрузочный код, извлекающий твиты через API, и я могу получить к нему доступ по URL http://localhost:8081/trend/twitter?keyword=selena и теперь я пытаюсь подключить этот API в моей форме реагирования JS, чтобы при поиске ключевого слова в реагировать он получал доступ к Twitter через этот вызов API и отображал результаты. Я просматриваю онлайн-коды с утра и пробую все предложения, но пока ничего не работает.

Я получаю это сообщение об ошибке на своей консоли

Не удалось загрузить ресурс: сервер ответил со статусом 403 () twitter: 1 Доступ к выборке в 'http://localhost:8081/trend/twitter?keyword=douglas' от источника' http://localhost:3000' был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'. Если непрозрачный ответ отвечает вашим потребностям, установите режим запроса «no-cors», чтобы получить ресурс с отключенным CORS.

весенний загрузочный код 

@RestController
@RequestMapping("/trend")
public class TwitterController {
    private TwitterService twitterService = new TwitterService();

    // Get all tweets by keyword
    @GetMapping("/twitter")
    @CrossOrigin(origins = "http://localhost:3000/")

    public List<Tweet> getTweets(@RequestParam("keyword") String keyword) {
        return twitterService.getTweets(keyword);
    }

Код ReactJS 

class App extends Component {

  getTrend = async (e) => {
    e.preventDefault();

    const keyword = e.target.elements.keyword.value;

    const api_call = await fetch(`http://localhost:8081/trend/twitter?keyword=${keyword}`); //make API call

    // axios.get('http://localhost:8081/trend/twitter?keyword=${keyword}')
    //.then((res) => {
      console.log(api_call);
   // });
  }

  render() {
    return (
      <div>
          <div class="col-sm-9">
            <SearchEngine getTrend={this.getTrend} />
          </div> 
      </div>
    );
  }
}

export default App;

1 Ответ

1 голос
/ 11 апреля 2019

Вы пытаетесь включить CORS на http://localhost:3000/, но вам нужно http://localhost:8081

...