1# 解决Web组件本地资源跨域问题 2 3## 拦截本地资源跨域 4 5为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。因此，在使用Web组件加载本地离线资源的时候，Web组件会拦截file协议和resource协议的跨域访问。可以通过方法二设置一个路径列表，再使用file协议访问该路径列表中的资源，允许跨域访问本地文件。当Web组件无法访问本地跨域资源时，开发者可以在DevTools控制台中看到类似以下报错信息： 6 7``` 8Access to script at 'xxx' from origin 'xxx' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted. 9``` 10 11## 本地资源跨域问题解决方法 12 13- 方法一 14 15 为了使Web组件能够成功访问跨域资源，开发者应采用http或https等协议，替代原先使用的file或resource协议进行加载。其中使用http或者https等协议替代的url域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用Web组件的[onInterceptRequest](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9)方法，对本地资源进行拦截和相应的替换。 16 17 以下结合示例说明如何使用http或者https等协议解决本地资源跨域访问失败的问题。其中，index.html和js/script.js置于工程中的rawfile目录下。如果使用resource协议访问index.html，js/script.js将因跨域而被拦截，无法加载。在示例中，使用https:\//www\.example.com/域名替换了原本的resource协议，同时利用[onInterceptRequest](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9)接口替换资源，使得js/script.js可以成功加载，从而解决了跨域拦截的问题。 18 19 ```ts 20 // main/ets/pages/Index.ets 21 import { webview } from '@kit.ArkWeb'; 22 23 @Entry 24 @Component 25 struct Index { 26 @State message: string = 'Hello World'; 27 webviewController: webview.WebviewController = new webview.WebviewController(); 28 // 构造域名和本地文件的映射表 29 schemeMap = new Map([ 30 ["https://www.example.com/index.html", "index.html"], 31 ["https://www.example.com/js/script.js", "js/script.js"], 32 ]) 33 // 构造本地文件和构造返回的格式mimeType 34 mimeTypeMap = new Map([ 35 ["index.html", 'text/html'], 36 ["js/script.js", "text/javascript"] 37 ]) 38 39 build() { 40 Row() { 41 Column() { 42 // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名。 43 // 本例中构造www.example.com为例。 44 Web({ src: "https://www.example.com/index.html", controller: this.webviewController }) 45 .javaScriptAccess(true) 46 .fileAccess(true) 47 .domStorageAccess(true) 48 .geolocationAccess(true) 49 .width("100%") 50 .height("100%") 51 .onInterceptRequest((event) => { 52 if (!event) { 53 return; 54 } 55 // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域 56 if (this.schemeMap.has(event.request.getRequestUrl())) { 57 let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!; 58 let mimeType = this.mimeTypeMap.get(rawfileName); 59 if (typeof mimeType === 'string') { 60 let response = new WebResourceResponse(); 61 // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置 62 response.setResponseData($rawfile(rawfileName)); 63 response.setResponseEncoding('utf-8'); 64 response.setResponseMimeType(mimeType); 65 response.setResponseCode(200); 66 response.setReasonMessage('OK'); 67 response.setResponseIsReady(true); 68 return response; 69 } 70 } 71 return null; 72 }) 73 } 74 .width('100%') 75 } 76 .height('100%') 77 } 78 } 79 ``` 80 81 ```html 82 <!-- main/resources/rawfile/index.html --> 83 <html> 84 <head> 85 <meta name="viewport" content="width=device-width,initial-scale=1"> 86 </head> 87 <body> 88 <script crossorigin src="./js/script.js"></script> 89 </body> 90 </html> 91 ``` 92 93 ```js 94 // main/resources/rawfile/js/script.js 95 const body = document.body; 96 const element = document.createElement('div'); 97 element.textContent = 'success'; 98 body.appendChild(element); 99 ``` 100 101- 方法二 102 103 通过[setPathAllowingUniversalAccess](../reference/apis-arkweb/js-apis-webview.md#setpathallowinguniversalaccess12)设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。此外，一旦设置了路径列表，file协议将仅限于访问列表内的资源(此时，[fileAccess](../reference/apis-arkweb/ts-basic-components-web.md#fileaccess)的行为将会被此接口行为覆盖)。路径列表中的路径必须符合以下任一路径格式： 104 105 1.应用文件目录通过[Context.filesDir](../reference/apis-ability-kit/js-apis-inner-application-context.md#context)获取，其子目录示例如下： 106 107 * /data/storage/el2/base/files/example 108 * /data/storage/el2/base/haps/entry/files/example 109 110 2.应用资源目录通过[Context.resourceDir](../reference/apis-ability-kit/js-apis-inner-application-context.md#context)获取，其子目录示例如下： 111 112 * /data/storage/el1/bundle/entry/resource/resfile 113 * /data/storage/el1/bundle/entry/resource/resfile/example 114 115 当路径列表中的任一路径不满足上述条件时，系统将抛出异常码401，并判定路径列表设置失败。若设置的路径列表为空，file协议的可访问范围将遵循[fileAccess](../reference/apis-arkweb/ts-basic-components-web.md#fileaccess)的规则，具体示例如下。 116 117 ```ts 118 // main/ets/pages/index.ets 119 import { webview } from '@kit.ArkWeb'; 120 import { BusinessError } from '@kit.BasicServicesKit'; 121 122 @Entry 123 @Component 124 struct WebComponent { 125 controller: WebviewController = new webview.WebviewController(); 126 uiContext: UIContext = this.getUIContext(); 127 128 build() { 129 Row() { 130 Web({ src: "", controller: this.controller }) 131 .onControllerAttached(() => { 132 try { 133 // 设置允许可以跨域访问的路径列表 134 this.controller.setPathAllowingUniversalAccess([ 135 this.uiContext.getHostContext()!.resourceDir, 136 this.uiContext.getHostContext()!.filesDir + "/example" 137 ]) 138 this.controller.loadUrl("file://" + this.uiContext.getHostContext()!.resourceDir + "/index.html") 139 } catch (error) { 140 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 141 } 142 }) 143 .javaScriptAccess(true) 144 .fileAccess(true) 145 .domStorageAccess(true) 146 } 147 } 148 } 149 ``` 150 151 ```html 152 <!-- main/resources/resfile/index.html --> 153 <!DOCTYPE html> 154 <html lang="en"> 155 156 <head> 157 <meta charset="utf-8"> 158 <title>Demo</title> 159 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"> 160 <script> 161 function getFile() { 162 var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js"; 163 // 使用file协议通过XMLHttpRequest跨域访问本地js文件。 164 var xmlHttpReq = new XMLHttpRequest(); 165 xmlHttpReq.onreadystatechange = function(){ 166 console.log("readyState:" + xmlHttpReq.readyState); 167 console.log("status:" + xmlHttpReq.status); 168 if(xmlHttpReq.readyState == 4){ 169 if (xmlHttpReq.status == 200) { 170 // 如果ets侧正确设置路径列表，则此处能正常获取资源 171 const element = document.getElementById('text'); 172 element.textContent = "load " + file + " success"; 173 } else { 174 // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误 175 const element = document.getElementById('text'); 176 element.textContent = "load " + file + " failed"; 177 } 178 } 179 } 180 xmlHttpReq.open("GET", file); 181 xmlHttpReq.send(null); 182 } 183 </script> 184 </head> 185 186 <body> 187 <div class="page"> 188 <button id="example" onclick="getFile()">stealFile</button> 189 </div> 190 <div id="text"></div> 191 </body> 192 193 </html> 194 ``` 195 196 ```javascript 197 // main/resources/resfile/js/script.js 198 const body = document.body; 199 const element = document.createElement('div'); 200 element.textContent = 'success'; 201 body.appendChild(element); 202 ```