[Solved] NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load xxxx

In the process of developing the project, and the back-end docking, we use a mature integrated and comprehensive architecture JHipster. The back end is java spring-boot front end ts+react, and the requirement is that there is a requirement to nest an iframe in the page. Then an error occurred in the front end of the $.ajax request initiated in the iframe as follows:

"NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://192.168.31.149:8081/api/concepts/3253'

 

Front-end code:

$.ajax({
  url: `$ {RED.API.schema.URI ()} / $ {conceptIds}`,
  method: "GET",
  async: false,
  crossDomain: true,
  headers: {
  'Access-Control-Allow-Origin': '*',
  accept: 'application/json',
  Authorization: `Bearer ${window.parent.localStorage
    .getItem("jhi-authenticationToken")
    .replace(/\"/g, "")}`,
  },
  success: data => {
    console.log(data)
  },
  error: err => {
    console.error(err)
  },
});

As you can see, as long as the $.ajax request opens and closes async to open the synchronous mode, the data cannot be requested.

Solution:

After consulting, some information on the Internet. I found that most of the solutions are just to change async to true. But my project application must use synchronization to render data. So it can’t be changed to asynchronous use.

Finally, use docker to run two containers to simulate the online and local environments respectively. The following differences are found in the request header of the request:

After local debugging, the difference between the request response of the static file proxy mode and the local development mode is found as follows: 
[Online Response Headers] 
Accept-Ranges: bytes 
Cache-Control: no-store 
Connection: keep-alive 
Content-Encoding: gzip 
Content-Language: en- 
Content-Length: 2213 
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: 
Content-Type: text/html;charset=utf-8 
Date: Thu, 18 Jul 2019 06:28:37 GMT 
Feature-Policy: geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'self'; payment 'none' 
Last-Modified: Thu, 18 Jul 2019 02:03:28 GMT 
Referrer-Policy: strict-origin-when-cross-origin 
Server: nginx/1.17.0 
X-Content-Type-Options: nosniff 
X-Frame-Options: DENY 
X-XSS-Protection: 1; mode=block 


[Local Response Headers] 
accept-ranges: bytes 
Connection: keep-alive 
Content-Type: text/html; charset=UTF-8 
Date: Thu, 18 Jul 2019 06:40:59 GMT 
etag: W/"16de-hwm87recU2tkzw2pAE/RFVGX6+0" 
Server: nginx/1.17.0 
Transfer-Encoding: chunked 
x-powered-by: Express 

[Comparative difference] 
There are more settings online: 
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: 
Feature-Policy: geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'self'; payment 'none' 
Referrer-Policy: strict-origin-when-cross-origin 
X-Content-Type-Options: nosniff 
X-Frame-Options: DENY 
X-XSS-Protection: 1; mode=block

The result is that the back-end of the framework is configured with an xss security mechanism called Content-Security-Policy to intercept insecure requests. Then comment in config/SecurityConfiguration.java in the java project and remove the injection of the response header to solve the problem.

// SecurityConfiguration.java

@Override
    public void configure(HttpSecurity http) throws Exception {
        // @formatter:off
        http
            .csrf()
            .disable()
            .addFilterBefore(corsFilter, UsernamePasswordAuthenticationFilter.class)
            .exceptionHandling()
            .authenticationEntryPoint(problemSupport)
            .accessDeniedHandler(problemSupport)
        .and()
            // .headers()
            // .contentSecurityPolicy("default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:")
        // .and()
            // .referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)
        // .and()
            // .featurePolicy("geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'self'; payment 'none'")
        // .and()
            // .frameOptions()
            // .sameOrigin()
        // .and()
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and()
            .authorizeRequests()
            .antMatchers("/api/authenticate").permitAll()
            .antMatchers("/api/register").permitAll()
            .antMatchers("/api/activate").permitAll()
            .antMatchers("/api/account/reset-password/init").permitAll()
            .antMatchers("/api/account/reset-password/finish").permitAll()
            .antMatchers("/api/**").authenticated()
            .antMatchers("/management/health").permitAll()
            .antMatchers("/management/info").permitAll()
            .antMatchers("/management/prometheus").permitAll()
            .antMatchers("/management/**").hasAuthority(AuthoritiesConstants.ADMIN)
        .and()
            .httpBasic()
        .and()
            .apply(securityConfigurerAdapter());
        // @formatter:on
    }

Similar Posts: