App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Te

最新推荐文章于 2022-02-15 08:42:33 发布
原创 最新推荐文章于 2022-02-15 08:42:33 发布 · 956 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在iOS9系统更新后，由于苹果将HTTP协议改为了HTTPS协议，导致应用网络请求出现问题时的解决方法。通过在Info.plist文件中加入特定配置，可以临时绕过AppTransportSecurity的安全限制，恢复正常网络请求。

今晚将Xcode升到了7.0版本，手机升到了iOS9，结果运行之前开发的应用，用到网络的地方，发现出现这样的错误：

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app‘s Info.plist file.

在iOS9 中，苹果将原http协议改成了https协议，使用 TLS1.2 SSL加密请求数据。

解决方法：

在info.plist 加入key

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure解决
05-10 786
选择下图所示选项: App Transport Security Settings。type改为字典 (Dictionary)值改为YES后重新编译启动问题解决。展开并点击添加号添加子项。
完美解决unknown failed to transfer from http://0.0.0.0/ during a previous attempt的错误
念兮为美
07-20 2078
完美解决unknown failed to transfer from http://0.0.0.0/ during a previous attempt的错误
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure
VictorZhang
10-07 1425
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file. iOS 9.0由于强制使用https  所以之前使用
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.
Keep It Simple, Stupid
11-22 5402
解决方法： 1.使用https协议请求； 2.Info.plist中增加App Transport Security Settings子项Allow Arbitrary Loads设置为YES。
iOS ATS(App Transport Security has blocked a cleartext HTTP (http://) resource load since it is i...
mazaiting的博客
01-04 141
异常日志： 2018-01-04 15:33:42.270 01NSURLConnection[532:15138] App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions c...
解决App Transport Security has blocked a cleartext HTTP (http://) resource load
xiaohuihui1225021的博客
03-14 478
前段时间赶项目去了，基本没时间来写一写基础，这次想写个网上获取图片，结果发现苹果的HTTP协议修改了，出现了 App Transport Security has blocked a cleartext HTTP (http://) resource load 错误 https://developer.apple.com/library/prerelease/ios/releasenotes
Maven 解决 maven-default-http-blocker (http://0.0.0.0/): Blocked mirror for repositories 问题
gmHappy
02-15 6930
一、问题描述 在Jenkins中利用Jenkinsfile进行流水线项目构建 pipeline { agent { docker { image 'maven:3.8.4-jdk-8' args '-v /root/.m2:/root/.m2 -v /root/.m2/mymvn/settings.xml:/usr/share/maven/ref/settings.xml' } } stages {
成功解决If your current network has https://www.anaconda.com blocked, please filea support request with
头部AI社区如有邀博主AI主题演讲请私信—心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，专注，谦虚，自律，反思，成长，还算比较正能量的博主，公益免费传播…内心特别想在AI界做出一些可以推进历史进程影响力的技术(兴趣使然，有点小情怀，也有点使命感呀
12-06 7341
成功解决If your current network has https://www.anaconda.com blocked, please filea support request with 目录 解决问题 解决思路 解决方法 解决问题 Collecting package metadata (current_repodata.json): failed CondaHTTPError: HTTP 000 CONNECTION FAILED for
前后端分离跨域问题Access to XMLHttpRequest at ‘http://localhos...has been blocked by CORS policy: No ‘Access-
qq_42416602的博客
12-05 8568
完整报错如下： Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8084' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST http://localhost:8081/login net::ERR
IOS10.11 无法访问http的问题解决办法
08-31
主要介绍了IOS10.11 无法访问http的问题解决办法的相关资料,需要的朋友可以参考下
App Transport Security has blocked a cleartext HTTP(http://) resource load since it is insecure.
iverain的专栏
01-12 3454
使用Xcode 7创建项目，向服务器发送请求时，无法连接服务器，错误信息如下： App Transport Security has blocked a cleartext HTTP(http://) resource load since it is insecure. Temporary exceptions can be configured via your app’s In
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. 问题
jiuqiaozi的专栏
02-18 417
在Info.plist文件中添加"NSAppTransportSecurity", Type为"Dictionary",再添加"NSAllowsArbitraryLoads", Type 为"Boolean"，“Value”为“YES”即可。
编译问题：App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecur
逆流瞅瞅的专栏
10-25 706
今天遇到一个问题，在Xcode6.3.2 上程序运行没问题模拟器正常显示，但换到Xcode7.0.1上 会报错 错误描述： App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be conf
App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. 报错...
路漫漫其修远
09-23 172
在做一个网络应用时,解析json时报错 App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file. fatal error...
【iOS开发问题】App Transport Security has blocked a cleartext HTTP (http://) resource load
为者常成，行者常至
01-17 534
问题： App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file. 原因 Xcode7后的iOS9 h
打开vue打包后dist的index.html报错：chunk-vendors.c8ffacd0.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND app.387a1451.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND app.53b02f07.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND index.html:1 Tracking Prevention blocked access to storage for https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css. index.html:1 Tracking Prevention blocked access to storage for https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css. index.html:1 Tracking Prevention blocked access to storage for https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css. index.html:1 Tracking Prevention blocked access to storage for https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css. /C:/favicon.ico:1
最新发布
11-08
<think>我们正在解决Vue项目打包后打开dist/index.html时出现的两个问题： 1. 资源加载失败（chunk-vendors.js, app.js, app.css等） 2. Tracking Prevention blocked access to storage（跟踪预防阻止访问存储） 根据引用内容，我们可以分析问题并给出解决方案。 问题1：资源加载失败 原因：在Vue项目中，默认的打包配置是将所有资源路径设置为绝对路径（以'/'开头），这样在本地直接打开index.html文件时，浏览器会试图从文件系统的根目录去寻找这些资源，而实际上资源是在dist目录下，因此会导致加载失败。 解决方案：修改Vue项目的配置，将资源路径改为相对路径。 具体步骤： 1. 在项目的根目录下，找到`vue.config.js`文件（如果没有则新建一个）。 2. 在其中添加以下配置： ```javascript module.exports = { publicPath: './', // 使用相对路径 // 其他配置... } ``` 这样打包后的index.html中引用资源的路径就会变成相对路径（例如：`./js/app.js`），从而在本地直接打开时能够正确加载。 另外，如果项目使用了vue-cli 3.x以上版本，也可以直接在package.json文件中指定publicPath，但通常推荐使用vue.config.js。 问题2：Tracking Prevention blocked access to storage 原因：这是浏览器（特别是Microsoft Edge）的一种安全机制，当从本地文件系统打开HTML文件时，浏览器可能会阻止页面访问localStorage或sessionStorage，以防止跟踪。 解决方案：由于这个问题主要是由浏览器安全策略引起的，所以我们无法直接通过代码完全避免。但是，我们可以采取以下措施： - 在本地测试时，建议使用HTTP服务器来运行打包后的dist目录，而不是直接打开index.html文件。因为通过HTTP服务（如localhost）访问，浏览器不会触发这种安全策略。 - 可以使用简单的HTTP服务器，例如使用Node.js的http-server、或者Python的SimpleHTTPServer等。 使用http-server的步骤： 1. 安装http-server（如果未安装）: ```bash npm install -g http-server ``` 2. 在dist目录下运行: ```bash http-server -p 8080 ``` 3. 然后在浏览器中访问：http://localhost:8080 或者使用Vue CLI自带的serve命令（需要全局安装）: ```bash serve -s dist ``` 另外，如果项目中有使用到localStorage或sessionStorage，确保在访问之前检查其可用性，避免在不可用的情况下使用。例如： ```javascript if (typeof(Storage) !== 'undefined') { // 使用localStorage或sessionStorage } else { // 提示或者使用其他方式 } ``` 但是，请注意，即使做了这样的检查，在本地文件系统中直接打开时，浏览器仍然可能阻止访问，所以最好的办法还是通过HTTP服务器来运行。 总结： 1. 修改publicPath为相对路径解决资源加载失败。 2. 使用HTTP服务器运行dist目录以避免跟踪预防阻止访问存储的问题。 如果按照上述步骤操作后，资源加载问题应该解决，而存储访问问题则通过本地服务器运行可以避免。 注意：如果项目中有路由使用history模式，那么在打包后直接打开文件也可能会有路由问题，此时同样需要服务器支持。如果使用hash模式则不会有这个问题。但这里主要解决的是资源加载和存储访问问题。 另外，根据引用[2]和[4]的内容，如果项目中有使用外部库（如AgoraRTC）或者需要处理跨域问题，在开发环境中可以通过配置代理解决，但在打包后，这些配置不再起作用，所以生产环境的跨域问题需要在服务器端解决（例如Nginx配置）。不过，这里的问题主要是本地打开dist文件，所以跨域问题可能不会在此场景出现。 如果问题仍然存在，请检查打包后的dist目录结构，确保资源文件确实存在于相应的路径。 最后，生成相关问题： §§相关问题§§ 1. 如何配置Vue项目的publicPath为相对路径？ 2. 有哪些简单的方法可以本地运行打包后的dist目录？ 3. 在Vue项目中，如何避免浏览器安全策略导致的存储访问问题？ 4. Vue项目打包后路由出现404问题如何解决？ </think>### 解决Vue打包后资源加载失败和存储访问问题 #### **问题分析** 1. **资源加载失败**（chunk-vendors.js/app.js/app.css） - 根本原因：Vue打包后默认使用绝对路径引用资源（如`/js/app.js`），但直接打开本地`index.html`时，浏览器会尝试从根目录加载资源。 - 引用依据： > "整个项目是一个主文件index.html...通过组件嵌套引用其他单文件组件"[^1] 2. **Tracking Prevention blocked storage访问** - 浏览器安全策略（如Edge/Chrome）阻止本地HTML文件访问`localStorage/sessionStorage`。 - 常见于直接打开本地文件（`file://`协议）。 --- #### **解决方案**（分步操作） ##### ✅ 步骤1：修复资源路径（核心） 修改Vue项目的**publicPath**为相对路径： 1. 打开项目根目录的`vue.config.js`（若无则新建） 2. 添加配置： ```javascript module.exports = { publicPath: './', // 关键！改为相对路径 productionSourceMap: false // 可选，减小打包体积 } ``` 3. 重新打包： ```bash npm run build ``` - 效果：打包后`index.html`中的资源路径变为`./js/app.js`，可本地直接加载。 ##### ✅ 步骤2：绕过存储访问限制 方案A：使用本地HTTP服务器（推荐） ```bash # 安装serve（Vue官方推荐） npm install -g serve # 在dist目录启动服务 serve -s dist ``` 访问`http://localhost:3000` 而非直接打开文件。 方案B：修改浏览器策略（临时测试） - **Chrome**：启动时添加参数 `chrome.exe --disable-web-security --user-data-dir="C:\Temp"` - **Edge**：地址栏输入`edge://flags/#block-insecure-private-network-requests` → 设为**Disabled** --- #### **补充优化** 1. **路由模式问题**（若使用Vue Router） ```javascript const router = new VueRouter({ mode: 'hash', // 改为hash模式，避免本地打开404 routes: [...] }) ``` 2. **外部资源处理**（如CDN） - 参考引用[2]，在`webpack`中配置`externals`： ```javascript // vue.config.js configureWebpack: { externals: process.env.NODE_ENV === 'production' ? { 'vue': 'Vue', 'vue-router': 'VueRouter' } : {} } ``` - 在`public/index.html`中手动添加CDN链接。 3. **跨域问题**（若需请求API） - 开发环境：参考引用[4]配置`proxyTable`[^4] - 生产环境：需后端配置CORS或Nginx代理 --- #### **验证结果** 1. 打包后`dist/index.html`资源路径应为相对路径： ```html <!-- 正确示例 --> <script src="./js/chunk-vendors.js"></script> ``` 2. 通过`http://localhost:3000`访问页面，控制台无资源错误和存储拦截提示。 > **关键点总结**：相对路径`publicPath: './'` + 本地HTTP服务是解决此类问题的标准方案[^1][^2][^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值