Adding complete description how to call REST services from Vue.js to Spring Boot REST backend, including solution for SOP problems when developing with parallel webpack-dev-server and Spring Boot startet (different origins because of different ports)

Author: jonashackt

README.md

@@ -224,6 +224,132 @@ npm run dev
 That´s it! 
 
 
+## HTTP calls from Vue.js to (Spring Boot) REST backend
+
+Prior to Vue 2.0, there was a build in soultion (vue-resource). But from 2.0 on, 3rd party libraries are necessary. One of them is [Axios](https://github.com/mzabriskie/axios) - also see blog post https://alligator.io/vuejs/rest-api-axios/
+
+```
+npm install axios --save
+```
+
+Calling a REST service with Axios is simple. Go into the script area of your component, e.g. Hello.vue and add:
+
+```
+import axios from 'axios'
+
+data () {
+  return {
+	response: [],
+	errors: []
+  }
+},
+
+callRestService () {
+  axios.get(`api/hello`)
+    .then(response => {
+      // JSON responses are automatically parsed.
+      this.response = response.data
+    })
+    .catch(e => {
+      this.errors.push(e)
+    })
+}
+}
+```
+
+In your template area you can now request a service call via calling `callRestService()` method and access `response` data:
+
+```
+<button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
+
+<h3>{{ response }}</h3>
+```
+
+### The problem with SOP
+
+Single-Origin Policy (SOP) could be a problem, if we want to develop our app. Because the webpack-dev-server runs on http://localhost:8080 and our Spring Boot REST backend on http://localhost:8088.
+
+We need to use Cross Origin Resource Sharing Protocol (CORS) to handle that (read more background info about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
+
+#### Enabling Axios CORS support
+
+Create a central Axios configuration file called `http-commons.js`:
+
+```
+import axios from 'axios'
+
+export const AXIOS = axios.create({
+  baseURL: `http://localhost:8088`,
+  headers: {
+    'Access-Control-Allow-Origin': 'http://localhost:8080'
+  }
+})
+```
+
+Here we allow requests to the base URL of our Spring Boot App on port 8088 to be accessable from 8080.
+
+Now we could use this configuration inside our Components, e.g. in `Hello.vue`:
+```
+import {AXIOS} from './http-common'
+
+export default {
+  name: 'hello',
+
+  data () {
+    return {
+      posts: [],
+      errors: []
+    }
+  },
+  methods: {
+    // Fetches posts when the component is created.
+    callRestService () {
+      AXIOS.get(`hello`)
+        .then(response => {
+          // JSON responses are automatically parsed.
+          this.posts = response.data
+        })
+        .catch(e => {
+          this.errors.push(e)
+        })
+    }
+  }
+```
+
+#### Enabling Spring Boot CORS support
+
+Additionally, we need to configure our Spring Boot backend to answer with the appropriate CORS HTTP Headers in it´s responses (theres a good tutorial here: https://spring.io/guides/gs/rest-service-cors/). Therefore we add the annotation `@CrossOrigin` to our BackendController:
+
+```
+@CrossOrigin(origins = "http://localhost:8080")
+@RequestMapping(path = "/hello")
+public @ResponseBody String sayHello() {
+    LOG.info("GET called on /hello resource");
+    return HELLO_TEXT;
+}
+```
+
+Now our Backend will responde CORS-enabled and accepts requests from 8080. But as this only enables CORS on one method, we have to repeatately add this annotation to all of our REST endpoints, which isn´t a nice style. We should use a global solution to allow access with CORS enabled to all of our REST resources. This could be done in the `SpringBootVuejsApplication.class`:
+
+```
+// Enable CORS globally
+@Bean
+public WebMvcConfigurer corsConfigurer() {
+	return new WebMvcConfigurerAdapter() {
+		@Override
+		public void addCorsMappings(CorsRegistry registry) {
+			registry.addMapping("/api/*").allowedOrigins("http://localhost:8080");
+		}
+	};
+}
+```
+
+Now all calls to resources behind `api/` will return the correct CORS headers. 
+
+
+# Links
+
+Easy to use web-based Editor: https://vuejs.org/v2/examples/
 
 
 

backend/pom.xml

@@ -16,6 +16,7 @@
 		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
 		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
 		<java.version>1.8</java.version>
+		<rest-assured.version>3.0.3</rest-assured.version>
 	</properties>
 
 	<dependencies>
@@ -39,6 +40,14 @@
 			<artifactId>spring-boot-starter-test</artifactId>
 			<scope>test</scope>
 		</dependency>
+
+		<dependency>
+			<groupId>io.rest-assured</groupId>
+			<artifactId>rest-assured</artifactId>
+			<version>${rest-assured.version}</version>
+			<scope>test</scope>
+		</dependency>
+
 	</dependencies>
 
 	<build>

backend/src/main/java/de/jonashackt/springbootvuejs/SpringBootVuejsApplication.java

@@ -2,11 +2,26 @@
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.context.annotation.Bean;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
 @SpringBootApplication
 public class SpringBootVuejsApplication {
 
 	public static void main(String[] args) {
 		SpringApplication.run(SpringBootVuejsApplication.class, args);
 	}
+
+	// Enable CORS globally
+	@Bean
+	public WebMvcConfigurer corsConfigurer() {
+		return new WebMvcConfigurerAdapter() {
+			@Override
+			public void addCorsMappings(CorsRegistry registry) {
+				registry.addMapping("/api/*").allowedOrigins("http://localhost:8080");
+			}
+		};
+	}
 }

backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java

@@ -0,0 +1,23 @@
+package de.jonashackt.springbootvuejs.controller;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController()
+@RequestMapping("/api")
+public class BackendController {
+
+    private static final Logger LOG = LoggerFactory.getLogger(BackendController.class);
+
+    public static final String HELLO_TEXT = "Hello from Spring Boot Backend!";
+
+    @RequestMapping(path = "/hello")
+    public @ResponseBody String sayHello() {
+        LOG.info("GET called on /hello resource");
+        return HELLO_TEXT;
+    }
+
+}

backend/src/main/resources/application.properties

@@ -0,0 +1 @@
+server.port=8088

backend/src/test/java/de/jonashackt/springbootvuejs/SpringBootVuejsApplicationTests.java

@@ -1,16 +1,33 @@
 package de.jonashackt.springbootvuejs;
 
+import de.jonashackt.springbootvuejs.controller.BackendController;
+import org.apache.http.HttpStatus;
 import org.junit.Test;
 import org.junit.runner.RunWith;
 import org.springframework.boot.test.context.SpringBootTest;
 import org.springframework.test.context.junit4.SpringRunner;
 
+import static io.restassured.RestAssured.given;
+
 @RunWith(SpringRunner.class)
-@SpringBootTest
+@SpringBootTest(
+		classes = SpringBootVuejsApplication.class,
+		webEnvironment = SpringBootTest.WebEnvironment.DEFINED_PORT,
+		properties = "server.port = 8088"
+)
 public class SpringBootVuejsApplicationTests {
 
+	private static final String BASE_URL = "http://localhost:8088";
+
 	@Test
-	public void contextLoads() {
+	public void backendServiceSaysHello() {
+		given()
+		.when()
+			.get(BASE_URL + "/api/hello")
+		.then()
+			.statusCode(HttpStatus.SC_OK)
+			.assertThat()
+				.equals(BackendController.HELLO_TEXT);
 	}
 
 }

frontend/package-lock.json

@@ -14,6 +14,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "axios": "^0.16.2",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0"
   },

frontend/package.json

@@ -1,31 +1,57 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
     <h2>Sources</h2>
     <ul>
       <li><a href="https://github.com/jonashackt/spring-boot-vuejs" target="_blank">github.com/jonashackt/spring-boot-vuejs</a></li>
     </ul>
+    <h2>REST service call results</h2>
+
+    <button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
+
+    <h3>{{ response }}</h3>
+
   </div>
 </template>
 
 <script>
+// import axios from 'axios'
+import {AXIOS} from './http-common'
+
 export default {
   name: 'hello',
+
   data () {
     return {
-      msg: 'Welcome to your Vue.js powered Spring Boot App'
+      msg: 'Welcome to your Vue.js powered Spring Boot App',
+      response: [],
+      errors: []
+    }
+  },
+  methods: {
+    // Fetches posts when the component is created.
+    callRestService () {
+      AXIOS.get(`api/hello`)
+        .then(response => {
+          // JSON responses are automatically parsed.
+          this.response = response.data
+        })
+        .catch(e => {
+          this.errors.push(e)
+        })
     }
   }
+      // async / await version (created() becomes async created())
+//       try {
+//         const response = await axios.get(`http://localhost:8088/hello`)
+//         this.posts = response.data
+//       } catch (e) {
+//         this.errors.push(e)
+//       }
+    // }
+  // }
 }
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

frontend/src/components/Hello.vue

@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+export const AXIOS = axios.create({
+  baseURL: `http://localhost:8088`,
+  headers: {
+    'Access-Control-Allow-Origin': 'http://localhost:8080'
+  }
+})

frontend/src/components/http-common.js

@@ -14,7 +14,7 @@
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>1.5.6.RELEASE</version>
+		<version>1.5.7.RELEASE</version>
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>