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

"Troubleshooting the failure of the alert function to work properly when loading content

I am working on a webpage named index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Co ...

javascriptajax

How can one break down enum values in typescript?

I've defined an enum in TypeScript as shown below: export enum XMPPElementName { state = "state", presence = "presence", iq = "iq", unreadCount = "uc", otherUserUnreadCount = "ouc", sequenc ...

javascripttypescriptobjectenumsdestructure

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

javascripthtmlregexgmail

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...

javascripthtmlonclickhyperlinkajax-request

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

javascriptjqueryhtml

ESLint only lints certain errors in the command-line interface

Incorporating eslint into my project has been a game-changer. Here's how my .eslintrc file is set up: // http://eslint.org/docs/rules { "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, "plugins": ...

javascriptnode.jsreactjsbabeljseslint

When getStaticPaths and getStaticProps are programmed to deliver results

Seeking assistance with my first attempt at using getStaticPaths and getStaticProps in nextJS as a beginner. Can anyone help me resolve this issue? const datas = [ { id: 1, name: "Banheiro", image: "https://res.cl ...

javascriptreactjsnext.js

Best method for creating HTML elements with jQuery

I've come across various styles and methods for creating elements in jQuery, each with its own unique approach. I am interested in discovering the most effective way to construct elements and whether a specific method stands out as superior for any pa ...

javascriptjquerycoding-styleelement

Utilize JavaScript to append elements to an array in each loop iteration, gradually building a single, unified

I find myself in a situation where an async request is sending data to a child react component. Upon logging the "data" in the component, I receive multiple arrays sequentially. Ideally, I would prefer not to rewrite the request in the parent component and ...

javascriptarraysreactjsloops

Displaying one out of two elements when the button is clicked

Trying to implement two buttons on the parent component, each displaying a different component - one for itemlist and the other for itemlist2. Struggling to get it right, even after following an example at https://codepen.io/PiotrBerebecki/pen/yaVaLK. No ...

javascriptarraysreactjsif-statementonclick

Creating a shared component for restricting input to only numbers in ReactJS with Material-UI TextField

I am currently working with MUI TextField and my goal is to implement a validation that allows only numbers but not the eE+- keys. I aim to create a standard component for this using onChange event. I need to address the scenario where if the user enters ...

javascriptreactjsmaterial-ui

Modify the JSON file stored on the local server

I am currently working on a project that is being hosted on a local server. My main objective is to be able to edit and save a JSON file that will contain the configurations for this project. I have succeeded in reading the file and accessing it using axio ...

javascriptnode.jsjsonexpressvue.js

Using *ngFor with a condition in Angular 4 to assign different values to ngModel

I am new to Angular 4 and encountering an issue with using *ngFor in conjunction with HTML drop-down select and option elements. My categories array-object looks like this - categories = [ { id:1, title: 'c/c++'}, { id:2, title: 'JavaScri ...

javascripthtmlangular

Encountering a 415 Error in Spring MVC: Unrecognized Media Type Issue

Dealing with a recurring issue and struggling to find a solution that works for me when attempting to post a form using jQuery AJAX. Note: Previously thought it was a client-side issue, tried everything possible on the client side without success. Spr ...

jqueryajaxspringspring-mvc

Matching utility types and themes in Tailwind CSS

I encountered an issue while trying to implement the Tailwind plugin in my project. It seems that a TypeScript error has occurred. I'm curious about the data types of matchUtilities and themes. Can someone provide some insight? const plugin = require( ...

javascriptcsstypescripttailwind-css

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

Issue with AngularJS ng-model not updating the value of a hidden input

My goal is to transmit form data using hidden input like this: <input type="hidden" required ng-model="formHolder.template[position].itemKey[itr]" ng-value="[[ formItem ]]" /> The value of formItem can be any string. Issues arise when the strings c ...

javascriptangularjs

creating a JSON object in PHP that can be easily parsed by JavaScript

In my project, I have an extensive list of items, each item further divided into four sub-items. While it's convenient for me to organize this data in nested arrays using PHP, I encounter issues when trying to transfer them as a JSON object to the cli ...

javascriptphpjson

What are alternative methods for implementing autocomplete search for usernames from a database without relying on jQuery?

Searching through various exam resources, I have come across autocomplete solutions using jQuery. In my MySQL database, I have a collection of usernames. My objective is to create an autocomplete feature which pulls data from the database by utilizing PHP ...

phpmysqlajaxautocomplete

The success of your order hinges on jQuery being defined when using browserify

I encountered an issue while attempting to utilize a plugin located in /js/lib/stellar.jquery.js: var $ = require('jquery'); require('./lib/stellar.jquery') $(function(){ $.stellar(); }); Upon running the code, I received an err ...

javascriptjquerynpmbrowserify