在开发项目的过程中,和后端对接,我们使用是一个成熟的集成很全面的架构JHipster。后端为java spring-boot 前端ts+react,需求是有一个需要在页面里嵌套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开启同步模式则就会无法请求数据。

解决方法:

经过查阅,网上的一些信息。发现大部分解决方案都是吧async改为true就可以了。但我的项目运用里必须使用同步来渲染数据。所以没法改成异步使用。

最后使用docker跑两个容器分别模拟线上和本地的环境。发现请求的请求头里有着如下差异:

经过本地调试,找到静态文件代理模式和本地开发模式的请求响应差异如下:
【线上的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 【本地的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 【对比差异】
线上的多了一下设置:
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()
// .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
}

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load xxxx错误解决方法的更多相关文章

  1. mui.min.js:7 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load

    mui框架做的微信公众号网页,在上传数据的时候报了这个错,async: true,//将false改为true就可以了 https://blog.csdn.net/liuzp111/article/d ...

  2. 配置Chrome启动参数支持本地AJAX请求,解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

  3. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    解决方法import Vue from "vue"; 默认引入的文件是 vue/dist/vue.runtime.common.js.这个可以在node_modules/vue/p ...

  4. Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

    在设置请求头的时候报这个Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPE ...

  5. vue 运行项目时,Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

    npm  run dev 运行项目后 验证码显示不出来 并报错 Uncaught (in promise) DOMException: Failed to execute 'open' on 'XML ...

  6. WebRTC | Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to parse SessionDescription. a=msid: Missing track ID in msid attribute.

    1.问题回放 使用如下代码获取局域网IP报错 (代码来源:https://github.com/diafygi/webrtc-ips 日期:2019-02-16) Uncaught (in promi ...

  7. javamail发送邮件及错误解决方法javax.mail.AuthenticationFailedException: failed to connect, no password specified?

    javamail发送邮件及错误解决方法javax.mail.AuthenticationFailedException: failed to connect, no password specifie ...

  8. Failed dependencies: 检查依赖性错误 解决方法

    centOs下: error: Failed dependencies: 检查依赖性错误 解决方法 刚才安装avast的linux版,结果出现了: [root@localhost /]# rpm -i ...

  9. PHP failed to ptrace(PEEKDATA) pid 13659: Input/output error错误解决方法

    PHP failed to ptrace(PEEKDATA) pid 13659: Input/output error错误解决方法 现在改linux内核文件打开限制<pre>ulimit ...

随机推荐

  1. 向github提交本地项目

    首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://gi ...

  2. Delphi的Anymouse方法探秘

    匿名函数是用Interface来实现的,具体细节可以看http://www.raysoftware.cn/?p=38匿名函数还是非常方便的.比如自己封装的异步调用.Async(procedure(AP ...

  3. 进程间通信 - 动态链接库中共享内存(利用DLL的2~3G的地址段空间)

    前言 进程是装入内存并准备执行的程序,每个进程都有私有的虚拟地址空间,由代码.数据,以及其他的一些资源组成.32位系统的进程分配4G的虚拟地址空间.内存地址范围是0x00000000-0xFFFFFF ...

  4. MySQL 查询缓存 QUERY_CACHE

    查询缓存(QueryCache)保存查询返回的完整结果.当查询命中该缓存,MySQL会立即返回结果,跳过解析.优化和执行阶段. 官方在特定环境测试结果(官方文档中有详细说明): 1.如果对某表进行简单 ...

  5. c# 向驱动打印机发送命令打开钱箱

    引用的dll 链接: https://pan.baidu.com/s/1MjwmfvBCPTBq1QNapKzDmg 提取码: 9wuf [DllImport("Drawcash.dll&q ...

  6. 星星的模块封装类 IDSStarsScoreView

    1 IDSStarsScoreView 的实现效果     2 类的封装方法:   <声明文件>   // //  IDSStarsScoreView.h //  Near // //  ...

  7. java8计算时间差

    示例1:计算指定时间单位的时间差 import java.time.Instant;import java.time.LocalDateTime;import java.time.temporal.C ...

  8. 共识协议——RAFT&PBFT

    区块链是一个没有中央权威的分布式对等系统.虽然权力下放可以防止各方的腐败行为,但是它必需要有一个可靠的共识协议来作出决策,让分散在世界各地的节点可以形成一致的意见.常见的共识算法有比特币采用的POW, ...

  9. vsphere网络

    物理网络 物理机间建立的网络,VMware ESXi运行于物理机之上 虚拟网络 单台物理机上运行的虚拟机之间通信形成的逻辑网络. 一.网络概述 1. 物理以太网交换机 2.vSphere标准交换机 虚 ...

  10. PWN菜鸡入门之栈溢出 (2)—— ret2libc与动态链接库的关系

    准备知识引用自https://www.freebuf.com/articles/rookie/182894.html 0×01 利用思路 ret2libc 这种攻击方式主要是针对 动态链接(Dynam ...