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