Question

我试图在IOS WKWebview上读取我的本地JSON文件。但无法加载资源：Access-Control-Allow-Origin不允许使用Origin。

之前我使用的是UIWebview，它运行正常。但是，当我更改为WKWebview时，会发生此错误。

 $.ajax({
           type: 'GET',
            url: 'json_app/country_state_json.json?callback=?',
            async: false,
            jsonpCallback: 'jsonCallback',
            contentType: 'application/json',
            dataType: 'jsonp',
            success: function(json) 
            {},
            error: function(e) {}
        });

请协助。

Answer 1

不幸的是，此时WKWebView不会使用＆＃34; file：//＆＃34;来异步加载JavaScript。协议[1] [2]。它是从DOM加载文件时工作的，只是不使用ajax或jQuery的.get（它只是抽象的ajax）。

这是一个我同时为自己感到骄傲并且并不自豪的黑客：

我有一个应用程序，需要根据一些动态信息加载JSON对象，然后处理它以显示Web内容。最初，我试图让JavaScript动态获取JSON文件：

旧的HTML：

<html>
  <head>
    <script type="text/javascript" src="makeContent.js"></script>
  </head>
  <body></body>
</html>

旧的JSON：

{
    "myData": true,
    ...
}

旧的JavaScript：

$.get("data.json", function (data) {
  // Process the data and generate the content
}, "json");

有了这个，我遇到了和你一样的问题。 WKWebView不会加载data.json文件。

我的hack是将JSON内容包含在DOM中包含的另一个JavaScript对象中。新的JavaScript脚本只是将JSON数据作为字符串分配给全局变量。请注意，此字符串必须是单行，因为JavaScript不支持多行字符串。然后，当WKWebView加载时，这个新脚本会动态插入到DOM中：

JavaScript数据文件（替换JSON文件）：

var data = '{ "myData": true, ... }';

夫特：

let jsonInsertion = "var node = document.createElement('script');" +
                    "node.setAttribute('src', 'data.js');" +
                    "node.setAttribute('type', 'text/javascript');" +
                    "var head = document.getElementsByTagName('head')[0];" +
                    "head.insertBefore(node, head.childNodes[0]);"
webView?.evaluateJavaScript(jsonInsertion, completionHandler:  { (_, error) in
    print(error)
})

生成的HTML：

<html>
  <head>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="makeContent.js"></script>
  </head>
  <body></body>
</html>

现在，您的JavaScript应该能够将数据作为全局变量访问，并使用JSON.parse（数据）进行转换。您可能需要添加一些同步代码，以确保在应用程序插入数据脚本之后脚本运行。

同样，这是一个黑客，但它为我工作。希望它可能对你有用，直到Apple允许＆＃34; file：//＆＃34;协议

Answer 2

我打赌你需要在请求中提供一个完整的url而不是相对的url。如何使用：

url: document.URL + "/json_app/country_state_json.json?callback=",

（我删除了跟踪? - 这是不正确的，导致网址格式错误）

WKWebView - 无法加载资源：Access-Control-Allow-Origin不允许使用Origin null

2 个答案: