Redirecting CORS in Cordova: A Comprehensive Guide

My Cordova/Phonegap app is encountering an issue while trying to retrieve certain files using AJAX. The specific error message that I receive states:

XMLHttpRequest cannot load https://docs.google.com/uc?export=open&id=.... Redirect from 'https://docs.google.com/uc?export=open&id=...' to '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

In an attempt to resolve this issue, I have made modifications to the config.xml file:

<access origin="*" />
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

I have also included additional code in the index.html file:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-eval' 'unsafe-inline' http: https:">

Despite making these changes, the error persists even when accessing the application through a browser with cordova serve. Any suggestions or insights on how to resolve this issue?

javascriptajaxcordovacors

Answer №1

If you are unable to control the endpoint, it may be necessary for you to establish your own API in order to achieve this task.

One approach could involve creating a php endpoint and including the following line:

 header('Access-Control-Allow-Origin: *');

This allows your endpoint to relay the request to the Google endpoint, which will then pass the response back to your API for forwarding to your application.

It is my understanding that the Google endpoint can receive requests from other servers but not if the origin is null.

In essence, you must ensure that your request originates from an http:// URL rather than a file:// URL.

Answer №2

These are the specific configurations for both browser and android platforms that you need to implement.

config.xml

<allow-navigation href="*://doc.google.com/*" />

...

<platform name="android">
     ...
     <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
</platform>

network_security_config.xml

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomain="true">doc.google.com</domain>
    </domain-config>
</network-security-config>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing register helpers with node.js and express handlebars

When loading a record, I have a select option on my form and want to pre-select the saved option. Here is the code: The Student.hbs file displays the form, with the act obj coming from the student.js route student.hbs <form> <div class="for ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

The Jquery tooltip feature consistently displays the title of the header as the tooltip

Currently, I am utilizing the default Jquery tooltip library, and it functions wonderfully with one exception. In Firefox, the tooltip always displays the title of the page (within <head>). For example: <title>My Title</title></head> ...

javascriptjquerytooltip

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

javascriptjqueryhtmlcss

"Ajax validation is causing the duplication of the HTML page content within an HTML

My PHP username validation with Ajax code seems to be duplicating my HTML page inside an HTML div element, which is used for displaying Ajax errors. Despite trying various solutions and searching on Google, I have not been able to find a resolution yet. Th ...

javascriptphphtmljqueryajax

TypeScript encountered an unexpected { token, causing a SyntaxError

Despite multiple attempts, I can't seem to successfully run my program using the command "node main.js" as it keeps showing the error message "SyntaxError: Unexpected token {" D:\Visual Studio Code Projects\ts-hello>node main.js D:&bsol ...

javascripttypescriptecmascript-6

When attempting to print certain attributes, the Node.JS array unexpectedly becomes undefined

While attempting to print a specific attribute such as "Full time or part time" in the getEmployeesByStatus() function, I encountered an issue where it suddenly returns undefined even though the entire array prints when I try to display it. This problem ha ...

javascriptarraysnode.js

How can I alter the icon's color?

Is it possible for the icon's color to change to red when the condition is greater than 0, and to gray when the condition is equal to zero? <TouchableOpacity onPress={() => { if (Object.values(selectedIt ...

javascriptreactjsreact-native

Is there a way to programmatically generate an ASP:Button within an UpdatePanel that does not trigger a postback?

My web page features 2 ASP Tabs and an UpdatePanel within the first tab. During page load, I programmatically create a table inside the update panel with rows containing images, text, and an ASP:Button. The issue I am facing is that when the button is clic ...

asp.netajaxajax.net

Simple steps for transforming an array into a JavaScript object

Here is an array resembling a JSON structure with n elements: const mainData = [ { phrase: "Phrase 1", categorynumber: 1, optionnumber: 1, }, { phrase: "Phrase 2", categorynumber: 1, optionnumber: 2, }, ...

javascriptarraysjsonobjectnested

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...

javascriptjqueryajax

Guide on accessing the text content within a div element in HTML by triggering a button click

To extract specific text from multiple div tags, I need to trigger an event when clicking a button. <div class="col-lg-3 col-md-6 mb-4"> <div class="pricing-table pricing-secondary"> <div class="price-hea ...

javascripthtmljquery

The disappearance of the final element in an array after adding a new one using JavaScript

One of the challenges I'm facing in my backbone project involves creating an Add To Cart feature using window.localStorage. Below is my javascript code for the addToCart() function: var cartLS = window.localStorage.getItem("Cart"); var cartObject = ...

javascriptjquerybackbone.jslocal-storage

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

Steps to create a continuous blinking/flickering effect on a highchart pathfill

I am currently utilizing highcharts within one of my applications. I want to emphasize a particular stroke based on the content, and while I have achieved this already, I now need it to blink or flicker as if indicating an issue at that specific point. C ...

javascriptjqueryhighcharts

Tips for handling an empty jQuery selection

Below is the code snippet: PHP CODE: if($data2_array[7]['status'] == "OK"){ $degtorad = 0.01745329; $radtodeg = 57.29577951; $dlong = ($lng - $supermercado_lng); $dvalue = (sin($lat * $degtorad) * sin($superm ...

javascriptphpjquery

Utilizing use-immer and promises to effectively handle an API route mapping system

In the process of tackling the issue of double hook calls in Next.js dev mode, I've encountered a challenge with server API calls that cannot handle duplicates. To address this, I opted for fix #4 outlined in the following article, where I decided to ...

javascriptnext.jsimmer

Top method for handling chained ajax requests with jQuery

I'm facing a scenario where I have to make 5 ajax calls. The second call should only be made once the first call returns a response, the third call after the second completes, and so on for the fourth and fifth calls. There are two approaches that I ...

javascriptjqueryajax

Angular 1 and Javascript offer a different approach than using lodash omit and the delete operator

I am facing an issue with a child component where I need to remove properties from an object. Normally, using Lodash, it should work with the following code snippet: this.current.obj = omit(this.current.obj, ['sellerSupportWeb', 'sellerSup ...

javascriptangularjslodash

"Creating a dynamic loop in jQuery using JSON data fetched through an AJAX call to

I am a newcomer to Javascript and I am working on a jQuery-ajax-php project that seems to be exhibiting some strange behavior. The functionality works, but only sometimes. Here is my desired sequence of actions: Set up form settings (works) Retrieve JSO ...

phpjqueryajaxjson

In React js, I wanted to display the animation specifically on the "add to bag" button for the added item

When I click the "add to bag" button, all other buttons also display the animation. How can I make sure that only the clicked button shows the animation? Any suggestions? <Table responsive> <thead> <tr> ...

javascriptcssreactjsanimation