Vue + Spring Boot: resolving CORS errors and/or using HTTP in Spring Boot

Question

I made a website with the help of Vue 2 framework and a Java server using the Spring Boot framework to better understand the workflow for submitting forms in Spring Boot:

Client (website with address localhost:8080):

main.js:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue:

<template>
  <v-app>
    <v-main>
    <div>
        <h3>
            MyForm
        </h3>
        <div>
            <span>Name</span>
            <input v-model="userdata.name" type="text" />
        </div>
        <div>
            <span>Address</span>
            <input v-model="userdata.address" type="text" />
        </div>
        <div>
            <button @click="submit()">
                Submit
            </button>
        </div>
    </div>
    </v-main>
  </v-app>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
          userdata: {
            name: "",
            address: ""
          }
        }
    },
    methods: {
      async submit() {
        const resp = await this.$axios.post("https://localhost:8085/api/v1/form", 
        this.userdata);
        console.log(resp);
      }
    }
}
</script>

Server at localhost:8085:

SampleRequestHandler.java:

package com.example.sample;

import org.json.JSONObject;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin(origins = "http://localhost:8080", maxAge = 1800)
@RequestMapping("")
@RestController
public class SampleRequestHandler {
    public SampleRequestHandler() {
        //...
    }

    // @CrossOrigin
    @GetMapping("/form")
    public JSONObject submitForm(@RequestBody JSONObject form) {
        form.put("processed", true);
        return form;
    }
}

application.properties:

server.servlet.context-path=/api/v1
server.port=8085

The client at localhost:8080 will submit the form to localhost:8085; the server will then intercept this request via the submitForm() method, process the form and return a response.

But when I ran both client and server, and tried to submit the form through the client, I have been getting errors such as:

1. POST https://localhost:8085/api/v1/form net::ERR_SSL_PROTOCOL_ERROR when making axios request to https URL. Shows up in server as java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens
2. Access to XMLHttpRequest at 'http://localhost:8085/api/v1/form' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource when explicitly making request to http URL.
3. Access to XMLHttpRequest at 'localhost:8085/api/v1/form' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes when simply calling the localhost URL.

Since I knew that HTTPS has some other requirements, I wanted to use HTTP for both client and server to avoid CORS issues. Can this be done in Spring Boot? Is there another way to circumvent the CORS issues?

Answer 1

For error

java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens

Maybe, you coded wrong here.

methods: {
      async submit() {
        // SHOULD BE http://localhost:8085/api/v1/form NOT https://localhost:8085/api/v1/form
        const resp = await this.$axios.post("https://localhost:8085/api/v1/form", 
        this.userdata);
        console.log(resp);
      }
    }