When working with Google Drive and AngularJS, the use of the Accept-Encoding request header field is restricted

I am encountering an issue with my Angular JS code that reads a json file from Google Drive:

yummy.controller("slideCtrl", ['$scope', function($scope) {
}]).directive('slideElement', ['$interval', '$http',($interval, $http) {
return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        var path = 'https://googledrive.com/host/0B-74lO-UfPKoaDRySEsyQkZwNjQ/';
        element.html('<div class="loading"><img src="img/loading.gif"></div>');
        $http({
            method: 'GET',
            url: path + 'reduced.json'
        }).then(function(response) {
            console.log(response.data);
        });
}]);

While this code works fine in Chrome, Firefox, and IE, I am facing an error in Safari:

Failed to load resource: Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers.

I have attempted to resolve this issue by adding the following code:

{ headers: { 'Accept-Encoding': undefined }}

Unfortunately, this solution did not fix the problem. Can anyone provide guidance on how to make my code compatible with Safari? Thank you.

javascriptangularjsgoogle-drive-api

Answer №1

I encountered a similar issue, which turned out to be caused by a server setting that was incorrect.

You can attempt the code provided below:

.directive('slideElement', function($http) {
        return {
            restrict: 'E',
            link: function (scope, element, attrs) {
                var path = 'https://googledrive.com/host/0B-74lO-UfPKoaDRySEsyQkZwNjQ/';
                element.html('<div>loading</div>');
                $http({
                    method: 'GET',
                    url: path + 'reduced.json',
                    headers : {
                    'Content-Type' : 'application/json; charset=UTF-8'
                    }
                }).then(function (response) {
                    console.log(response.data);
                }, function(err){console.log("err")});
            }
        }
    })

Remember to include the header parameter with content-type as specified in the code above.

I hope this solution proves helpful to you.

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

Tips for labeling subplots in PLOTLY JS

Looking for some guidance on adding titles to plots in Plotly JS. I've checked out the documentation but couldn't find anything helpful. Any tips or suggestions would be greatly appreciated! ...

javascriptgraphtitleplotly.js

Steps for Implementing an Event Listener in JavaScript

While working on a page in Chrome, I encountered an issue where I wanted a modal to show up when a user clicked on an image. However, the functionality was not working as expected on my localhost. Upon further inspection, I believe there might be a problem ...

javascriptjqueryhtmlcss

Why isn't my Javascript code functioning properly?

I have been trying to use JavaScript to set equal column heights of two divs within a parent div. Someone else was able to provide a working example, but unfortunately I am having trouble making it work correctly (my version doesn't seem to be functio ...

asp.netjavascriptjquery

"Use the angular-google-map plugin to dynamically set the radius on a map using

I have implemented a page with a range slider to control the radius of a Google Maps circle. The range slider is utilized from https://github.com/danielcrisp/angular-rangeslider. Here is the script in my controller: //range $scope.sliderValue = 10 ...

javascriptangularjsgoogle-mapsangular-google-maps

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to construct a table dynamically based on the results returned from SQL. In this scenario, populating the table with the start time, end time, and user is straightforward: var StartTime = document.createElement('td'); var EndTime = docume ...

javascripthtmlangularjs

Custom JSON filtering

I have a JSON object called Menu which contains various menu items for my system that I am developing using VueJS + Vuetify. I need to filter these menu items based on the "text" field, regardless of position in the text and without differentiating between ...

javascriptjsonvue.jsfiltervuetify.js

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...

javascriptangulartypescript

Using JavaScript to submit the value of a checkbox

I'm currently working on a form submission using JavaScript that includes both text input and two checkboxes. <script> function SubmitFormData() { var preferredLocation = $("#preferred_location").val(); var relocation = []; ...

javascriptphpjqueryajax

I am trying to map through an array fetched from Firebase, but despite the array not being empty, nothing is displaying on the

I retrieved an array of products from a firebase database using the traditional method: export const getUsersProducts = async uid => { const UsersProducts = [] await db.collection('products').where("userID", "==", uid).get().then(sn ...

javascriptreactjsreduxgoogle-cloud-firestoreredux-firestore

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Hey there, I'm having some trouble extracting data from a URL to my HTML file using jQuery. Can anyone help out? I'm still new to this. Here's the code <html> <head> <title> My Program </title> <script src="ht ...

javascriptjqueryhtmljson

Is AJAX HTML element swapping a breeze with Rails controllers?

It would be great to have an ERB partial set up like this: <ul id='things-index'> <% @things.each do |t| %> <li><%= t.name %></li> <% end %> </ul> And have the ability to update it in the contro ...

javascriptruby-on-railsajax

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

What is the best way to display HTML stored in an Angular variable on a page?

My data includes HTML tags (such as <b>XXXX</b>) and I'd like it to appear as: XXXX When displayed on the view, I want it to be rendered in bold. How can I achieve this? ...

htmlangularjs

Is there a way for me to ensure that the file's name matches the object ID in the database?

let express = require("express"); let app = express(); let mongoose = require("mongoose"), bodyParser = require("body-parser"), methodOverride = require("method-override"), Book = require("./models/book"), multer = require('multer&apos ...

javascriptnode.jsmongodbexpressmulter

Error in Alchemy: Can someone explain why maxFeePerGas must be greater than or equal to maxPriorityFeePerGas?

I've been following a tutorial at . The twist is that I'm attempting to send ETH to the Ropsten test faucet. async function main() { require('dotenv').config(); const { API_URL, PRIVATE_KEY } = process.env; const { createAlchemyWe ...

javascriptblockchainethereumweb3js

I'm having issues with calculating weight percentages when dividing numbers into arrays. Why am I getting incorrect results?

Managing the allocation of users to computer instances, whether in Docker or AWS, can be a complex task. Users have the ability to increase the number of instances and change user assignments within those instances. Each instance is assigned a weight perce ...

javascriptarraysmath

Troubleshooting issues with form validation using if statements

Currently tackling a form validation challenge for a university project and hitting some roadblocks in the process. My attempts to use if statements within a function to validate the first-name input seem fruitless, as I'm not getting any response. A ...

javascripthtmlcss

Utilize Set.Attribute prior to entering the for loop

Could someone please clarify why I am unable to declare the var node before the for loop and then simply use appendChild(node) inside the loop? Why is it necessary to declare it for each iteration in order for it to affect all div elements? Otherwise, it w ...

javascript

Encountering an undefined variable in the .env file

Once the .env file was created in the main React folder REACT_APP_API_KEY=gzomlK5CKLiaIWS.... I also installed the .env NPM library Despite this, I continued to receive undefined in the API file. What could be causing this issue? import React, { useState ...

javascriptreactjsenvironment-variables

Tips on customizing label colors on a Donutchart using Google API

https://i.sstatic.net/Rpor0.png I am looking to change the color of 12.5 (to Green) and 25 (to red) based on the donut arc color in Google Charts. Below is the code snippet: var container = document.getElementById('chart_div'); var chart = new ...

javascriptjquerychartsgoogle-visualization