1. ホーム
  2. ジャワ

NetworkError: XMLHttpRequest'の'send'の実行に失敗しました。xxxxエラー解決策のロードに失敗しました

2022-03-17 17:28:42

プロジェクトの開発プロセスでは、バックエンドインターフェースは、我々は成熟した統合された非常に包括的なアーキテクチャJHipsterを使用しています。Javaスプリングブート用バックエンドフロントエンドTS +反応、需要がiframe要件のページを入れ子にする必要があります。その後、iframeの起動で$.ajaxリクエストフロントエンドのエラーは、次のように発生します。

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

フロントエンドのコードです。

$.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)
  },
});

$.ajax リクエストをオンにし、async をオフにして同期モードを有効にしている限り、データがリクエストされないことがわかります。

回避策

Web上の情報をいくつか確認した結果。ほとんどの解決策は、asyncをtrueに変更するだけです。しかし、私のプロジェクトでは、データのレンダリングに同期を使用する必要があります。だから、私はそれを非同期に変更することはできません。

最後に、オンライン環境とローカル環境をシミュレートするために、dockerを使って2つのコンテナを実行しました。その結果、リクエストヘッダに以下のような違いがあることがわかりました。

After local debugging, we found the following differences in the request response between the static file proxy mode and the local development mode. 
[Response Headers on line]. 
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 

Comparison differences 
The online one has a few more settings. 
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

その結果、フレームワークのバックエンドには、安全でないリクエストを傍受する Content-Security-Policy という xss セキュリティメカニズムが設定されることになりました。そして、javaプロジェクトのconfig/SecurityConfiguration.javaのアノテーションで、問題を解決するレスポンスヘッダーインジェクションを削除するようにしました。

// 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()
            // .frameOrigin()
        // .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
    }