cordova No Access-Control-Allow-Origin

Question

i have a webapi project(.net mvc webapi) that returns some data wrapped in json/xml so my cordova project send request to the certain api address to get the data but i get an access error as

Access to XMLHttpRequest at 'https://06ae934f.ngrok.io/api/Catalog/get_catalogs' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

js code

const Http = new XMLHttpRequest();
const url='https://06ae934f.ngrok.io/api/Catalog/get_catalogs';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  alert(Http.responseText)
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="org.test.test" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Catalog</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-navigation href="*"/>
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <access origin="https://06ae934f.ngrok.io"/>
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

This might be a similar issue. https://stackoverflow.com/questions/49937905/access-control-allow-origin-error-using-cordova/57489240#57489240 — Rafael M., Aug 14 '19 at 06:35

score 1 · Accepted Answer · answered Jun 18 '19 at 12:05

You Should Add This to web.config in your webApi project :

<system.webServer>
   <httpProtocol>
      <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
   </httpProtocol>
</system.webServer>

Massimiliano Comunale · Answer 2 · 2022-07-06T10:12:35.650

Answer i use cordova and i have no web.config file in the list.

<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <icon src="res/android/icon.png" />
    <allow-intent href="market:*" />
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>
<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

but nothing keeps giving me that error

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — mufazmi, Jul 06 '22 at 23:26

cordova No Access-Control-Allow-Origin

2 Answers2