How to fix CORS issues when connecting React to Google Apps Script?

Introduction Connecting React applications to Google Apps Script web apps can be straightforward, but CORS (Cross-Origin Resource Sharing) issues can often complicate matters. If you're encountering errors such as Access to fetch at 'https://script.google.com/macros/s/SCRIPT_ID/exec' from origin 'http://localhost:5173' has been blocked by CORS policy, you’re not alone. This guide will help you understand CORS, pinpoint why you're facing these errors, and provide actionable solutions to effectively handle CORS when integrating React with Google Apps Script. What Is CORS and Why Do Errors Occur? CORS is a security feature implemented by web browsers to restrict web applications from making requests to a domain different from the one that served the application. This is a common issue when a frontend React application on your local server attempts to connect to a Google Apps Script endpoint, which is hosted on a different origin. When your app tries to make the fetch call, the browser checks whether the target domain (Google Apps Script in your case) allows requests from your local domain (e.g., http://localhost:5173). If it doesn't, you receive the CORS error, and your request is blocked. Step-by-Step Solutions for Handling CORS Here are several solutions including modifying your Google Apps Script and React code to handle CORS effectively: Solution 1: Update Google Apps Script to Handle CORS To allow cross-origin requests, you need to explicitly set CORS headers in your Google Apps Script. Here’s how you can do it: function doPost(e) { try { const formData = JSON.parse(e.postData.contents); const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data'); sheet.appendRow([new Date(), formData.name, formData.email]); const output = JSON.stringify({ success: true }); return ContentService.createTextOutput(output) .setMimeType(ContentService.MimeType.JSON) .setHeader('Access-Control-Allow-Origin', '') // Allow all origins .setHeader('Access-Control-Allow-Methods', 'POST, GET'); // Allow specific methods } catch (error) { return ContentService.createTextOutput( JSON.stringify({ success: false, error: error.message }) ).setMimeType(ContentService.MimeType.JSON); } } In this code, we're setting the Access-Control-Allow-Origin header to , which allows requests from any origin. However, for production, it’s recommended to restrict it to specific origins for security reasons. Solution 2: Modify Your React Fetch Request After updating your Google Apps Script, make sure your React fetch request is appropriately set up: const handleSubmit = async (formData) => { try { const response = await fetch('https://script.google.com/macros/s/SCRIPT_ID/exec', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData), credentials: 'include' // If necessary, include credentials }); const result = await response.json(); return result; } catch (error) { console.error('Submission failed:', error); } }; Ensure that credentials: 'include' is included if your setup requires it. Solution 3: Using HtmlService If you still find issues, consider using HtmlService to serve your Google Apps Script endpoint, as it can facilitate setting CORS headers more effectively: function doGet() { return HtmlService.createHtmlOutput('Your HTML response here') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .setHeader('Access-Control-Allow-Origin', '') .setHeader('Access-Control-Allow-Methods', 'POST, GET'); } Additional Workarounds and Recommendations Local Testing: Consider using browser extensions like "Allow CORS" during development for testing purposes only. However, do not use it in production as it bypasses security. Backend Proxy: As you mentioned, creating a proxy API can be a workaround but ideally should be avoided to reduce complexity. Deployment: When deploying your Apps Script web app, ensure that the deployment configuration does not have security restrictions that could lead to CORS issues. Frequently Asked Questions 1. Why do I still get CORS errors after updating my Apps Script? Make sure that your script is published correctly and accessible through the correct URL. Check your browser console for details. 2. Is using in Access-Control-Allow-Origin safe? While helpful for development, it's safer to specify the exact origins that are allowed in production. 3. What if my React app still can’t read responses? Ensure that your Google Apps Script endpoint is properly sending back the required CORS headers according to the requests you are making. Run tests and verify from a different domain if possible. Conclusion Handling CORS between a React frontend and Google Apps Script backend can be quite straightforward by properly configuring your API to accept cross-origin requests. By following the steps outlined, you can effect

May 7, 2025 - 02:43

How to fix CORS issues when connecting React to Google Apps Script?

Introduction

Connecting React applications to Google Apps Script web apps can be straightforward, but CORS (Cross-Origin Resource Sharing) issues can often complicate matters. If you're encountering errors such as Access to fetch at 'https://script.google.com/macros/s/SCRIPT_ID/exec' from origin 'http://localhost:5173' has been blocked by CORS policy, you’re not alone. This guide will help you understand CORS, pinpoint why you're facing these errors, and provide actionable solutions to effectively handle CORS when integrating React with Google Apps Script.

What Is CORS and Why Do Errors Occur?

CORS is a security feature implemented by web browsers to restrict web applications from making requests to a domain different from the one that served the application. This is a common issue when a frontend React application on your local server attempts to connect to a Google Apps Script endpoint, which is hosted on a different origin. When your app tries to make the fetch call, the browser checks whether the target domain (Google Apps Script in your case) allows requests from your local domain (e.g., http://localhost:5173). If it doesn't, you receive the CORS error, and your request is blocked.

Step-by-Step Solutions for Handling CORS

Here are several solutions including modifying your Google Apps Script and React code to handle CORS effectively:

Solution 1: Update Google Apps Script to Handle CORS

To allow cross-origin requests, you need to explicitly set CORS headers in your Google Apps Script. Here’s how you can do it:

function doPost(e) {
  try {
    const formData = JSON.parse(e.postData.contents);
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
    sheet.appendRow([new Date(), formData.name, formData.email]);

    const output = JSON.stringify({ success: true });
    return ContentService.createTextOutput(output)
      .setMimeType(ContentService.MimeType.JSON)
      .setHeader('Access-Control-Allow-Origin', '*') // Allow all origins
      .setHeader('Access-Control-Allow-Methods', 'POST, GET'); // Allow specific methods
  } catch (error) {
    return ContentService.createTextOutput(
      JSON.stringify({ success: false, error: error.message })
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

In this code, we're setting the Access-Control-Allow-Origin header to *, which allows requests from any origin. However, for production, it’s recommended to restrict it to specific origins for security reasons.

Solution 2: Modify Your React Fetch Request

After updating your Google Apps Script, make sure your React fetch request is appropriately set up:

const handleSubmit = async (formData) => {
  try {
    const response = await fetch('https://script.google.com/macros/s/SCRIPT_ID/exec', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
      credentials: 'include' // If necessary, include credentials
    });
    const result = await response.json();
    return result;
  } catch (error) {
    console.error('Submission failed:', error);
  }
};

Ensure that credentials: 'include' is included if your setup requires it.

Solution 3: Using HtmlService

If you still find issues, consider using HtmlService to serve your Google Apps Script endpoint, as it can facilitate setting CORS headers more effectively:

function doGet() {
  return HtmlService.createHtmlOutput('Your HTML response here')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setHeader('Access-Control-Allow-Origin', '*')
    .setHeader('Access-Control-Allow-Methods', 'POST, GET');
}

Additional Workarounds and Recommendations

Local Testing: Consider using browser extensions like "Allow CORS" during development for testing purposes only. However, do not use it in production as it bypasses security.
Backend Proxy: As you mentioned, creating a proxy API can be a workaround but ideally should be avoided to reduce complexity.
Deployment: When deploying your Apps Script web app, ensure that the deployment configuration does not have security restrictions that could lead to CORS issues.

Frequently Asked Questions

1. Why do I still get CORS errors after updating my Apps Script?

Make sure that your script is published correctly and accessible through the correct URL. Check your browser console for details.

2. Is using `*` in `Access-Control-Allow-Origin` safe?

While helpful for development, it's safer to specify the exact origins that are allowed in production.

3. What if my React app still can’t read responses?

Ensure that your Google Apps Script endpoint is properly sending back the required CORS headers according to the requests you are making. Run tests and verify from a different domain if possible.

Conclusion

Handling CORS between a React frontend and Google Apps Script backend can be quite straightforward by properly configuring your API to accept cross-origin requests. By following the steps outlined, you can effectively mitigate any CORS-related issues and ensure that your application communicates seamlessly. Always remember to audit your security settings before deploying to production and avoid utilizing settings that can expose your application to vulnerabilities.