не передается Requestparam в axios get методе

Question

Всем привет. Не подскажете как я могу передать параметр в запрос на клиенте.Допустим я вбиваю адресной строке host:8081/api/greeting?name='Test' передается статика Name ,а хотелось бы чтобы он на сервер тоже передал Test. То есть он игнорируется мой requestparam

Клиент

 methods: {
    loadGreeting() {
      axios.get('http://localhost:8080/api/greeting',
          {params: {name:'Name'}})
          .then(response => {
            this.$data.counter = response.data.id;
            this.$data.username = response.data.content;
          }).catch(error => {
        console.log('ERROR: ' + error.response.data);
      })
    }
  }

Сервер

 @GetMapping( "/greeting")
 fun greeting(@RequestParam(value = "name",defaultValue = "User") name : String)

Answer 1

Ответ даётся при условии, что в данном примере:

фронтенд запущен на хосте localhost:8081
api запущен на localhost:8080

Доступ к параметрам запроса на фронтенде

Вам необходимо перехватить имя из параметров запроса с на фронтенде и передать его в помощью axios к api.

Во Vue это можно сделать с помощью компонента Router
У него есть свойство query.
Это объект, который содержит в себе все парамерты запроса в виде ключ:значение

Соответственно для того чтобы получить парамерт name, вам необходимо обратиться к нему следующим образом:

this.$route.query.name

После чего метод loadGreeting() будет выглядеть следующим образом:

loadGreeting() {
    axios.get('http://localhost:8080/api/greeting',
              {params: {name: this.$route.query.name} }
    ).then(response => {
        // ... тут ничего не изменилось
    }).catch(error => {
        console.log('ERROR: ' + error.response.data);
    })
}

Документация Router: https://router.vuejs.org/api/

Cross-Origin Resource Sharing (CORS)

Как Вы сами заметили также стоит учитывать то, что когда фронтенд и api работают на разных хостах, могут блокироваться запросы в браузере между разными хостами.

Браузеры разрешают делать асинхронные запросы на тот же источник(Same Origin)
Остальные запросы будут блокироваться.

Источник является "тем же" если в нем указаны:

тот же хост
тот же порт
тот же протокол

Соответственно, запрос между localhost:8081 и localhost:8080 будет заблокирован.

Для того, чтобы данный запрос не блокировался localhost:8080 должен разрешить localhost:8081 делать запросы к нему.
Для этого сервер должен в HTTP-ответе указать заголовок Access-Control-Allow-Origin в котором, должен быть указан хост(ы), которому мы доверяем, или шаблон, которому он удовлетворяет.

В Spring это можно реализовать проставив аннотацию @CrossOrigin

@GetMapping( "/greeting")
@CrossOrigin(origins = "http://localhost:8081")
fun greeting(@RequestParam(value = "name",defaultValue = "User") name : String)

CORS: https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

Answer 2

 axios.get('http://localhost:8080/api/greeting',
          {params: {name:this.$route.query.name}})

БЛОГ НА HUSL

не передается Requestparam в axios get методе

Ответы (2 шт):

Доступ к параметрам запроса на фронтенде

Cross-Origin Resource Sharing (CORS)