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协议进行加载。其中，替代的url域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用Web组件的[onInterceptRequest](../reference/apis-arkweb/ts-basic-components-web.md#oninterceptrequest9)方法，对本地资源进行拦截和相应的替换。
16
17  以下结合示例说明如何解决本地资源跨域访问失败的问题。其中，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
127    build() {
128      Row() {
129        Web({ src: "", controller: this.controller })
130          .onControllerAttached(() => {
131            try {
132              // 设置允许可以跨域访问的路径列表
133              this.controller.setPathAllowingUniversalAccess([
134                getContext().resourceDir,
135                getContext().filesDir + "/example"
136              ])
137              this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")
138            } catch (error) {
139              console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as   BusinessError).message}`);
140            }
141          })
142          .javaScriptAccess(true)
143          .fileAccess(true)
144          .domStorageAccess(true)
145      }
146    }
147  }
148  ```
149
150  ```html
151  <!-- main/resource/rawfile/index.html -->
152  <!DOCTYPE html>
153  <html lang="en">
154
155  <head>
156      <meta charset="utf-8">
157      <title>Demo</title>
158      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,   viewport-fit=cover">
159      <script>
160  		function getFile() {
161  			var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";
162        // 使用file协议通过XMLHttpRequest跨域访问本地js文件。
163  			var xmlHttpReq = new XMLHttpRequest();
164  			xmlHttpReq.onreadystatechange = function(){
165  			    console.log("readyState:" + xmlHttpReq.readyState);
166  			    console.log("status:" + xmlHttpReq.status);
167  				if(xmlHttpReq.readyState == 4){
168  				    if (xmlHttpReq.status == 200) {
169                  // 如果ets侧正确设置路径列表，则此处能正常获取资源
170  				        const element = document.getElementById('text');
171                          element.textContent = "load " + file + " success";
172  				    } else {
173                  // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误
174  				        const element = document.getElementById('text');
175                          element.textContent = "load " + file + " failed";
176  				    }
177  				}
178  			}
179  			xmlHttpReq.open("GET", file);
180  			xmlHttpReq.send(null);
181  		}
182      </script>
183  </head>
184
185  <body>
186  <div class="page">
187      <button id="example" onclick="getFile()">stealFile</button>
188  </div>
189  <div id="text"></div>
190  </body>
191
192  </html>
193  ```
194
195  ```javascript
196  // main/resources/rawfile/js/script.js
197  const body = document.body;
198  const element = document.createElement('div');
199  element.textContent = 'success';
200  body.appendChild(element);
201  ```