Angular CORS problem when sending information to Google Forms

When submitting the data: Error Message: Unfortunately, an error occurred while trying to send the data. The XMLHttpRequest cannot load https://docs.google.com/forms/d/xxxxxxxxxxxxx/formResponse. The response to the preflight request did not pass the access control check because there is no 'Access-Control-Allow-Origin' header present on the requested resource. This means that the origin 'http://localhost:8090' is not permitted access. The response received had a HTTP status code of 405.

$scope.postDataToGoogle = function(){
    $http({
        method: 'POST',
        crossDomain: true,
        url: 'https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXXXXXXX/formResponse',
        // dataType: "xml",
        data: tempData,
        }).success(function(data,status){
            //alert(data)
            console.log("Success");
        }).error(function(data,status) {
            console.log('Error:' + status);
        });
    }

Answer №1

It's not just about jQuery or Angular, CORS is responsible for allowing or disallowing requests by the back-end server. Google may not be supportive of this practice when it comes to accessing https://docs.google.com.

CORS (Cross-Domain Resource Sharing) helps maintain a clear separation between front-end and back-end systems.

CORS involves a set of special response headers sent from the server to instruct the browser on whether or not to permit the request.

Access-Control-Allow-Origin: http://example.com.

Why does jQuery throw an error when I request external resources using an Appcache Manifest?

Answer №2

Even though I attempted to find a solution using Angular, I was unsuccessful. However, when I switched to jQuery, the problem was resolved.

$.ajax({
            url: 'https://example.com/form',
            data: formData,
            type: "POST",
            dataType: "xml",
            statusCode: {
                0: function () {
                    alert('An error occurred');
                },
                200: function () {
                    alert('Thank you for providing feedback!');
                }
            }
        })

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

SPRING --- Tips for sending an array of objects to a controller in Java framework

Can someone help me with this issue? I am using AngularJS to submit data to my Spring controller: @RequestParam(value = "hashtag[]") hashtag[] o The above code works for array parameters but not for an array object. This is my JavaScript script: $http ...

Indicate the locale identification within the URL

Researching information on this specific topic related to angularJS has proven to be quite challenging. Is there a way for me to specify and rewrite all urls with a locale id, such as en-uk or nl-nl? Furthermore, I am interested in implementing proper ro ...

Create a series of canvas lines connecting all divs that share a common class identifier

Currently, I am in the process of creating a document that will establish a tree-type graph based on user input. My goal is to link styled divs with canvas lines to show their connection to the parent div. I have been utilizing .getBoundingClientRect() to ...

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

I stumbled upon something similar in the documentation for bootstrap-vue: A card with tabs: Now, how can I style the tabs to look like this: This is my current code: <b-card no-body> <b-tabs card> <b-tab title="Tab 1" active& ...

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

Retrieve Date and Time in Eastern Standard Time with AngularJS

Incorporating AngularJS, I am retrieving the date from a service as 2014-09-29 and time as 191042. I want to display it in the following format 29 September 2014 19:10:42 ET Is there a way to convert it to Eastern Time Zone since I am receiving the d ...

Ways to minimize an array of objects by shared key values?

Suppose I have an array of objects structured like this: var jsonData = [ {"DS01":123,"DS02":88888,"DS03":1,"DS04":2,"DS05":3,"DS06":666}, {"DS01":123,"DS02":88888,"DS03":2,"DS04":3,"DS05":4,"DS06":666}, {"DS01":124,"DS02":99999,"DS03":3,"DS04" ...

import JavaScript script from a NPM package installation

I am facing a challenge with my server where I do not have the ability to run npm due to lack of permissions, and only have access to Apache. Currently, I am in need of a JavaScript library that is typically deployed using npm, such as https://github.com/ ...

What is the best way to customize the source code within node modules dependencies?

Hello everyone! I'm facing a challenge with my project. I'm trying to make changes to the code of a component from a UI library, such as Semantic-UI or Material-UI. Currently, I am directly editing the code within the node_modules folder. However ...

Is there a way to invoke a function once grecaptcha.execute() has completed running, but in response to a particular event?

Presently, the JavaScript function grecaptcha.execute is triggered on page load, as shown in the first example below. This means that the reCAPTCHA challenge occurs as soon as the page loads. A more ideal scenario would be to trigger it when the form submi ...

Clicking on a table will toggle the checkboxes

I am facing an issue with this function that needs to work only after the page has finished loading. The problem arises due to a missing semicolon on the true line. Another requirement is that when the checkbox toggle-all is clicked as "checked", I want ...

Eliminating characteristics and rejuvenating the component

I have divs on my webpage that I want to keep hidden until a specific element is clicked. When trying to hide them, I encountered three options: visibilty: hidden - I didn't like this because the hidden div still took up space in the layout. displa ...

Adding concrete information to Drupal view

Is there a way to append a block content to a view result that has been requested using ajax in Drupal? ...

To use Material-UI Tooltip, the child title prop must be removed

I am facing an issue while trying to implement the Material-UI Tooltip component on a component that already has the title property. I need to use the child with the title prop, but I'm unsure if it's possible to combine both or if I should look ...

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

Is there a way to modify the style within a TS-File?

I've created a service to define different colors and now I want to set separate backgrounds for my columns. However, using the <th> tag doesn't work because both columns immediately get the same color. Here's my code: color-variatio ...

TypeScript React Object.assign method return type

I have a unique custom function that utilizes Object.assign to return a specific result. The documentation mentions that this function returns an array, but surprisingly, it can be destructured both as an array and an object. Check out the code snippet be ...

Can you provide instructions on integrating bootstrap 5.02 using npm and webpack?

Trying to bundle my webapp with webpack, but struggling with importing the bootstrap code. I've already spent hours troubleshooting this. Ever since setting up webpack, things haven't been working as they did before. And now, I keep encountering ...

What is the best way to integrate environment-specific configuration options into an AngularJS and Typescript project?

Currently, I am working on a project using AngularJS, Typescript, and VisualStudio. One of the key requirements for this project is to have a configuration file containing constants that control various settings such as REST API URLs and environment names. ...

Stack two divs together

It may seem silly, but I just can't get it to work. I'm attempting to enclose two divs with different classes in another div, but my current code is automatically closing the divs. There are multiple sets of divs with classes .panel-heading and ...