I am developing my first Spring Boot application and i ran into a weird problem. The configuration is very basic:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.pawsec</groupId>
<artifactId>kitchen</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>kitchen</name>
<description>The Kitchen restaurant system</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.0.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.pawsec</groupId>
<artifactId>common</artifactId>
<version>1.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<executable>true</executable>
</configuration>
</plugin>
</plugins>
</build>
</project>
We have some Javascript code on a page calling these two services. When the controller returns a Guy object in the first method, we get an empty response:
{data: "", status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: ""
headers: {}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
: Object
When we return a List of Guy objects from the second method, however, we get the full Json structure
back:
{data: Array(3), status: 200, statusText: "", headers: {…}, config: {…}, …}
config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
data: Array(3)
0: {guyId: 1, name: "Walter Sobchak", age: 45}
1: {guyId: 2, name: "Jeffrey Lebowski", age: 42}
2: {guyId: 3, name: "Theodore Donald Kerabatsos", age: 39}
length: 3
: Array(0)
headers: {content-type: "application/json;charset=UTF-8", cache-control: "private", expires: "Thu, 01 Jan 1970 00:00:00 GMT"}
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 200
statusText: ""
: Object
The controller looks like this:
package com.pawsec.kitchen.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.pawsec.kitchen.model.Guy;
@RestController
public class GuyController {
@RequestMapping(value="/get/guy/{guyId}", method=RequestMethod.GET,
headers={"Accept=application/json"})
public Guy getGuy(@PathVariable("guyId") int guyId) {
Guy someGuy = new Guy(guyId, "Walter Sobchak", 45);
return someGuy;
}
@RequestMapping(value="/get/guys", method=RequestMethod.GET,
headers={"Accept=application/json"})
public List<Guy> getGuys() {
Guy walter = new Guy(1, "Walter Sobchak", 45);
Guy theDude = new Guy(2, "Jeffrey Lebowski", 42);
Guy donny = new Guy(3, "Theodore Donald Kerabatsos", 39);
List<Guy> guys = new ArrayList<Guy>();
guys.add(walter);
guys.add(theDude);
guys.add(donny);
return guys;
}
}
Strangely, if i call these two services from a browser, i get the correct Json structure for both the calls.
When i run a mvn dependency:tree, the expected Jackson dependencies that come with a basic Boot Project are there.
This is what the JavaScript code looks like:
return dispatch => {
dispatch(fetchMenuStart());
const url = 'https://boot.ourcompany.com:8443/get/guy/1';
const headers = {
headers: {
'Content-Type': 'application/json'
}
}
axios.get(url, headers)
.then(res => {
console.log(res);
dispatch(fetchMenuSuccess(res.data.categories, res.data.restaurant));
})
.catch(error => {
console.log("error", error);
const errorMsg = 'There was an error fetching the menu';
dispatch(fetchMenuFail(errorMsg));
});
};
Can anyone suggest what might be causing this or steps to test to figure out the issue?
New javascript example code:
const doesNotWork = 'https://boot.exmpledomain.com:8443/get/guy/1';
const doesWork = 'https://boot.exmpledomain.com:8443/get/guys';
const headers = {
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
}
axios.get(doesNotWork, headers)
.then(res => {
console.log(res);
})
.catch(error => {
console.log("error", error);
const errorMsg = 'There was an error fetching the menu';
});
Could you please try changing the header to accept in the javascript
return dispatch => {
dispatch(fetchMenuStart());
const url = 'https://boot.ourcompany.com:8443/get/guy/1';
const headers = {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
axios.get(url, headers)
.then(res => {
console.log(res);
dispatch(fetchMenuSuccess(res.data.categories, res.data.restaurant));
})
.catch(error => {
console.log("error", error);
const errorMsg = 'There was an error fetching the menu';
dispatch(fetchMenuFail(errorMsg));
});
};
I have finally solved this issue by disabling CORS, with the following class:
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Profile("devel")
@Configuration
public class WebConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}
I have also added the @Profile
annotation to disable CORS only on development time.
By the way, the reason for the issue seems to be explained in:
https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#Protecting-JSON
When returning an object, it is interpreted as a non-empty JSON object (such as {"key": "value"}
). When returning a list, the same text is wrapped in squared brackets and it passes the protection.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With