IOS - CORS in WKWebView from local HTML file

问题

I am loading a local HTML page inside a WebView in an IOS application (using Xamarin but I don't think it changes anything)

This local HTML page makes ajax requests to a remote server.

Everything works fine if I use an UIWebView, but when I try to use a WKWebView instead it fails. It fails because of CORS, I tried with the following HTML source:

<html>
<body>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <h1>Test AJAX Requests</h1>
    <br />
    <button type="button" onclick="javascript: TestAjaxRequest('https://www.google.com');">Test AJAX Google</button>    
    <button type="button" onclick="javascript: TestAjaxRequest('https://api.github.com');">Test AJAX Github</button>
    <br />
    <p id="result"></p>
    <script type="text/javascript">

        function TestAjaxRequest(url) {
            $.ajax({
                url: url,
                success: function (result) {
                    $("#result").html('Success');
                },
                error: function (jqXHR, exception) {
                    $("#result").html('An error occured: ' + jqXHR.responseText + exception);
                },
            });
        }
    </script>
</body>
</html>

The call to google.com fails as CORS is not enabled on this server while the call to api.github.com works because CORS is enabled on their server.

I do not want to enable CORS on my server, I just want to enable it in the WKWebView, is it possible to make it work ?

回答1:

You can use your server as a proxy: it could receive requests from your browser, parse it and convert it into a request to the remote server. This communication will no longer be affected by the limitations of your browser.

The other solution would be to use the message handler, but that would involve access to the other project, run by the remote server to establish the communication.

回答2:

As far as I know, there is no solution in WKWebview itself if you don't change your server configuration.

But I have a solution even though it is a crazy way. I know haha.

Anyway, I solved this problem which is exactly the same issue.

First, I also wanted to use WKWebview because of its performance improvement and wanted to use XHR to request a server API. This means I wanted to handle all business logic with javascript only.

Take a look at this: WKWebview -> Native -> UIWebview -> Native -> WKWebview

Precondition.

A ViewController has one WKWebview and one UIWebview: of course, it's view is WKWebview. the UIWebview is zero size webview(invisible).
UIWebview only handles XmlHttpRequest.(include the minimum javascript files for XHR)

Work procedure

WKWebview sends requestHeader and data(for XHR) to Native
Native sends the received data to UIWebview
UIWebview requests XHR
UIWebview sends a response data to Native
Native sends a response data to WKWebview

With this solution, You don't need to depend on the native code or a server configuration. the entire implementation is not difficult. you can find out sample codes for #1,2,4,5. And although some additional steps are added, there is no delay in the total response time.

I tested all of it. I hope it helps you.

来源：https://stackoverflow.com/questions/44494422/ios-cors-in-wkwebview-from-local-html-file

标签

ios

cors

wkwebview