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
}
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ハートビート・エフェクトのためのHTML+CSS
-
HTML ホテル フォームによるフィルタリング
-
HTML+cssのボックスモデル例(円、半円など)「border-radius」使いやすい
-
HTMLテーブルのテーブル分割とマージ(colspan, rowspan)
-
ランダム・ネームドロッパーを実装するためのhtmlサンプルコード
-
Html階層型ボックスシャドウ効果サンプルコード
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
sublime / vscodeショートカットHTMLコード生成の実装
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
html のリストボックス、テキストフィールド、ファイルフィールドのコード例