405 Method Not Allowed - Compatible with all devices except for iOS Safari

Recently, I've been working on an application using AngularJS to track and submit statistics to a Google Apps Script for processing. While everything functions flawlessly on my computer in both Chrome and Firefox, encountering errors on the iPad has been quite frustrating.

The specific errors displayed when attempting to submit on the iPad are:

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

Failed to load resource: Cannot make any requests from null.

XMLHttpRequest cannot load . Cannot make any requests from null.

var URL = 'https://script.google.com/macros/s/.../exec';

$http.post(URL,
    $.param({ packet: JSON.stringify($scope.data) }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    }
).success(function(data, status) {
    alert(data.packet);
    $scope.rollover();
}).error(function(data, status) {
    console.log(data);
    console.log(status);
    $scope.show_status(data);
});

Upon checking the console, a few lines are printed. The data line appears empty and the response status is shown as 404.

If you have any insights or solutions, your assistance would be greatly appreciated!

Answer №1

For more information, please visit this link.

The issue at hand remains unresolved with no set date for a fix yet.

It seems that the problem stems from the google apps script's inability to handle the OPTIONS method used by Safari for 'preflighting' non-standard requests to external domains.

To work around this issue, I have resorted to sending a request to my server which then communicates with the google apps script. While not ideal and somewhat slow, it ensures the functionality of the site.

Below is the PHP code snippet I utilized on my server to make the request, passing in the macro, id, and sheet as GET parameters. The PHP script retrieves data from Google:

<?php

header('Access-Control-Allow-Origin: *');
$url = 'https://script.google.com/macros/s/';
$url .= $_GET['macro'];
$url .= '/exec?id=';
$url .= $_GET['id'];
$url .= '&sheet=';
$url .= $_GET['sheet'];

function get_data2($url) {
    $ch = curl_init();
    $timeout = 5;
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    curl_setopt($ch,CURLOPT_USERAGENT,'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}


$response = get_data2($url);

echo $response;

?>

This approach allows Safari to make a request to the same domain while bypassing the 403 redirect obstacle set up by Google with CURLOPT_FOLLOWLOCATION.

Update: May 7th, 2015

I've observed that despite receiving a 405 Method Not Allowed response from the server, the Google App Script is actually receiving the data successfully. For example, I can retrieve both get and post parameters without any issues.

To address this discrepancy, I have implemented a switch statement in the error handler of the AJAX call since the error code received is actually 0. It's encouraging to see some progress, but I remain cautious about relying too heavily on this setup for production use.

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

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

Converting a for loop into a fixed-size array?

I am currently developing a backbone application and have been given some sample code by the provider. The code includes a for loop that generates player names as 'player_1', 'player_2', and so on. However, I would like to manually ente ...

Utilizing jQuery for JSON parsing

Within my JavaScript code, I am working with the following array: var versions = [{"id":"454","name":"jack"}, {"id":"4","name":"rose"} {"id":"6","name":"ikma"} {"id":"5","name":"naki"} {"id":"667","name":"dasi"} ] I need to extract the name from this ar ...

Incantation within ng-include | src involving a series of characters

Is there a way to create a URL in ng-include|src by combining an expression and a constant string? I've attempted the code below, but it doesn't seem to be working. <aside ng-include src="{{staticPath}} + 'assets/tpl/products-feed-histor ...

React Native - Implementing asynchronous array filtering using async/await

In my code, there is a filtering method implemented as follows: _filterItems(items) { return items.filter(async item => { let isTrue = await AsyncStorage.getItem('key'); return isTrue; }) } However, when calling the method this._ ...

Is it the right time to implement a JavaScript framework?

Is there a need for using JavaScript frameworks like Angular or React if you are not developing single-page websites or components that receive live updates? ...

Using Selenium WebDriver to handle Angular requests in Java

I am currently developing tests for an angular-based application and I find myself in need of assistance. The specific task at hand involves creating a mechanism that will wait until all pending requests within the application have been processed before pr ...

Accessing parent libraries from an Iframe: A step-by-step guide

Currently, I'm developing a web application utilizing an embedded web server that restricts me from modifying the HTTP header to enable file caching. One issue I've encountered is that whenever I update the src of an iframe in my app, it forces a ...

The chosen option does not equal the value retrieved by using jQuery's

I am perplexed by the situation at hand. It seems that there is a discrepancy in the selected option of my select element. Despite appearing as the empty default option on top, the inspected element reveals it displaying a value of 13. https://i.sstatic.n ...

Tips for cutting down on bundle size in your WEBPACK setup when using VUEJS

I have tried numerous tutorials to reduce the size of my bundle, but none of them seem to be affecting the bundle size and I can't figure out why. Every time I integrate new code into webpack, the bundle size remains unchanged. (The application is c ...

Check for pattern using JavaScript regular expression

Utilizing ng-pattern to validate a regular expression. The pattern must include 3 letters and 2 numbers in a group. For example: G-31SSD or G-EEE43 Currently, the pattern only matches the second example. ng-model="newGroup.groupCode" ng-pattern="/^&bso ...

How can I retrieve the class of the parent element by referencing the child id in jQuery?

I want to trigger an alert on click from the child id <th id="first"> to the table(parent) class. alert($(this).parent('tr').attr('class')); This code helped me to get the class of the <tr>. However, when I try to get the ...

Optimally displaying extensive lists on a webpage using HTML

Are there any advanced javascript libraries that can efficiently handle loading a large list by only loading the visible part and simulating the scrollbar? <div id='container'> <!-- Empty space to mimic scrollbar, but preloading conte ...

Automatically retrieve the generated PDF file upon completion (Node.js and Express)

I've been utilizing the node module html-pdf to seamlessly convert my HTML into PDF format. The conversion process goes smoothly, but I'm encountering difficulties when it comes to downloading the file once it's been generated. Below is the ...

Incorporating native JavaScript classes within an Angular application

I have created a custom JavaScript class: var ExampleClass = new function(elements) { this.elements = elements; this.someFunction() { // logic involving this.elements }; }; How can I incorporate it into an A ...

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header in the response should not be using the wildcard '*'

I am encountering an issue with my socket.io server as I am unable to connect to it from my local HTML file on my Mac. Error: Failed to load : The 'Access-Control-Allow-Origin' header in the response is causing a problem due to the wildcard ...

Submit data in the manner of a curl request

Instead of using a curl command to push a file to a web server, I am attempting to create a simple webpage where I can select the file and submit it. Here is the HTML and JavaScript code I have written for this purpose: <html> <body> <i ...

In React (Next.js), the act of replacing a file is performed instead of adding a file

I kindly request a review of my code prior to making any changes. const test = () => { const [files, setFiles] = useState ([]); //I believe I need to modify the following statement. const handleFile = (e) => { const newFiles = [] for (let i= ...

A guide on incorporating router links within a list component in a React project

In one of my projects, I've implemented a navbar with a profile icon that expands to show four different options: "Log in", "Register", "Edit", and "Admin". However, I'm facing an issue where clicking on these links doesn't always redirect m ...

How can I access and retrieve a local variable using geolocation in HTML5 and the Google Maps API?

Seeking assistance with a coding dilemma: I need to retrieve the geolocation position for use in my calcRoute function. The goal is to set the geolocation as the starting point. Below is the code snippet: function calcRoute(){ var pos; navigator.g ...