CODEWITHSUNDEEP
cordovacordova-ios
Jorhel Reyes
Jorhel Reyes

Reputation: 142

Cordova iOS "Origin null is not allowed by Access-Control-Allow-Origin" on local files

Im develop a project on Cordova CLI and compile the APP on physical iPhone but in the console have a error with Access Control Origin.

This is the message:

[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (bootstrap.min.css, line 0)

The error is from local files but also ajax.

The configuration of my config.xml is:

<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="14" defaultlocale="es-ES" id="com..." version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>TEXT</name>
    <description>TEXT</description>
    <author email="MYEMAIL" href="MYURL">
        MYNAME
    </author>
    <content src="index.html" />
    <access origin="*" />        
    <allow-navigation href="*" />
    <preference name="windows-target-version" value="10.0" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

In all html files from my project the meta are:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:; connect-src *;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">

The data from my project is:

Cordova version 10.0.0
cordova-ios version  6.1.1

Can someone help me correct the problem? I thank you very much

Upvotes: 6

Views: 11545

Answers (3)

adamdport
adamdport

Reputation: 12613

With Cordova-ios@6, you need to specify the scheme and the hostname as per the docs here:

Additionaly, WKURLSchemeHandler support has been introduced with this release. Using a custom scheme to serve your app content through fixes CORS issues that exist because of the strict security policies that WKWebView has applied to the file scheme. You can easily configure your Cordova project to use a custom scheme by setting the preference options scheme and hostname in the config.xml file.

<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

This will serve up your app from app://localhost instead of file://, and your origin for xhr requests will also be app://localhost. Since this origin is sent with requests for CORS, you'll probably want to change the hostname to match the domain of your remote (if your app uses one), though anything should be fine as long as you add it to your CORS Access-Control-Allow-Origin headers on the response.

Upvotes: 23

Eric
Eric

Reputation: 10646

It's because there is no origin from WKWebView, so you cannot use CORS as it is. You need a plugin to allow XHR with no origin.

Check out cordova-plugin-ios-xhr

Upvotes: 4

Jorhel Reyes
Jorhel Reyes

Reputation: 142

The solution:

The problem only is a attribute on the link of the stylesheet of bootstrap :P

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />

The problem is:

crossorigin="anonymous"

Only need this:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

And the server side, on the PHP for ajax request add:

header("Access-Control-Allow-Origin: *")

Thanks for your time

Upvotes: 0

Related Questions