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

Should the page.js in a Next.js App router be a server component?

Is it standard practice in Next.js 13 and above (App router) for the page.js of all routes/folders to be a server component? I know that it can be a client component with use client, but is this advisable or are there potential issues during the build proc ...

Troubleshooting Problem with jQuery's $.ajax Success Response

While working with a jQuery $.ajax call, I stumbled upon an issue within my success callback function: success: function(response) { console.log('response = '+response); console.log('response.validate = '+response.validate); } ...

Selection Change Event for Dropdown Menu

Just starting to learn JavaScript and currently working with 3 select elements on a JSP page: <select id="railwayServiceList" name="railwayService_id" onchange="changeCompaniesCombo()"></select> <select id="companyList" name="company_i ...

Position of JSON data response is inaccurate

Currently, I have a function that calls an API from the server in the following manner: getDataSet(callback) { request.open('POST', `${apiPath}`); request.setRequestHeader('Content-Type', 'application/x-ww ...

Error in Next.js: The element type is not valid. Please make sure it is either a string (for built-in components) or a class/function (for composite components) and not undefined

I've encountered an issue while working on my Next.js project where I am trying to import the Layout component into my _app.js file. The error message I received is as follows: Error: Element type is invalid: expected a string (for built-in componen ...

Exploring the Depths of Multidimensional JSON Arrays in PHP

I am currently working on developing a web-based file manager that allows me to organize, view, create, edit, and delete folders and files. In order to store information about these folders, files, and subfolders, I am in need of an appropriate data struct ...

Sticky header in React data grid

Is there a way to implement a sticky header for a data grid in react? I have tried various methods but haven't been able to figure it out. Any suggestions would be appreciated. You can find my code sandbox example here. #react code export const Styl ...

Adding a combination of HTML and Javascript to an element can result in unexpected behavior

http://jsfiddle.net/PeKdr/ Encountering an issue when having a JavaScript variable that contains both HTML and JavaScript, resulting in unexpected behavior in the output window. Neither of the buttons - one triggering the function appendTheString() or the ...

The geolocation navigator is not defined

Currently, I am in the process of developing an AngularJS application that I plan to convert into a mobile app using Cordova. My goal is to incorporate Cordova's geolocation plugin into the app, but I have encountered an issue where it returns undefin ...

It appears that the jQuery.post() method is being overlooked or bypassed for unknown reasons

Trying to understand why the call to jQuery.post() isn't fetching the data or running the function after the fetch. Three files are included: an HTML file, a JavaScript file, and a PHP file. The HTML contains the modal element intended to appear when ...

Encountering difficulty in creating a Nuxt website using @googlemaps/js-api-loader

While using the @googlemaps/js-api-loader in my Nuxt 3 website, I encountered an issue. Everything worked perfectly during local development. However, when I attempted to build the project with nuxt generate (whether locally or on Vercel), I received the f ...

Uploading files with the help of Formik and the Material-UI stepper component

When attempting to upload a file, the entire component refreshes each time. The process involves 3 steps: the first step captures the user's name, the second step collects their address, and the third step allows them to upload a profile picture. Howe ...

It is not possible to attach separate links to images in a JavaScript slider

I am struggling with linking individual images in a JavaScript slider for a client's website. The slider is fully functional and works well, but I can't seem to figure out how to link the images properly. When I remove items from <--ul class= ...

Understanding the timing of records being returned via an Observable in Angular's ngOnInit

In my Angular 2 application, I am using an observable to keep track of an array of records. As the results of this observable are stored in the variable "records", I am utilizing *ngFor="let record of records" to iterate over and display them in my view. ...

Sliding content with the grace of a visual journey

I'm currently working on a content slider that is very similar to this one. My goal is to make it rotate automatically, but I've been struggling to get it to work. I've attempted various methods, including triggering a click event on the lin ...

`Technical challenges with input parameters and validation of forms`

I have a form that contains multiple input fields. To streamline the process, I came up with the idea of creating a directive to group and manage commonly used fields. Here is an example of how my form looks: <form name="aForm"> <input type= ...

Executing JavaScript code using an HTML form submission

Greetings, I have implemented an HTML form on my website for user login using AJAX (jQuery), but I am encountering some issues. Below is the JavaScript code: function validateLoginDetails() { $('[name=loginUser]').click(function() { ...

When browserify is utilized, the error "function is not defined" may show up as an Un

Exploring an example at and attempting a function call as shown below: My HTML code is: <!DOCTYPE html> <html> <head> <title>Testing Browserify</title> <script src="bundle.js"></script> </head> <body& ...

Issue: The 'in' operator is not allowed for searching

Passing Data from Child Component to Parent Component in AngularJS In my AngularJS project, I have two components: search and form. The search component is a child of the form component. Within the search component, there is a text input field that contai ...

Tips for automatically filling in fields when a button is clicked in a React application

I'm attempting to pre-fill the form fields that are duplicated with data from already filled fields. When I click the "Add Fields" button, new fields are replicated, but I want them to be pre-populated with data from existing fields. How can I access ...