0

Okay, so I'm trying to connect a React App to my Google Apps Script project, which let users make custom slide templates and generate them, export to PDF, ... Or that's the intention, but I can't use my GAS project as Web App and make HTTP requests from my frontend.

I've tried to deploy it as a Web App and all fine. There is my configuration about that: Deploy as Web App Configuration

I can go to the URL and see the content but is when I try to access from Axios on React that it's starting to give me CORS / Network errors.

I suppose that I need to configure the OAuth screen to request scope permissions about Drive, Slides... and add the token received by that on the Axios petition, but I don't know what to do it, or if it's that what I need.

Please, someone could refer me to any source of information, or explain to me how to make this kind of connection? Thanks in advance :)

EDIT: So looking for in related posts I've used OAuth 2.0 Playground to test the request to my Google Apps Script web app, and everything is working fine! But anyways, when I try to replicate on my react project it still doesn't work. This are the steps I've done:

  1. Get GAS project scopes on GAS Script > File > Project Properties > Scopes and put on 'Select & Authorize APIs' step on Playground.
  2. Also added the 'https://www.googleapis.com/auth/drive.file' scope, as mentioned here.
  3. Exchanged authorization code for tokens and sent the request. (Response is 200)
  4. Added headers on Axios request:
  useEffect(() => {
    let token = '' // Here the token obtained from OAauth Playground

    const params = {
      params: { action: 'update' }
    }

    const config = {
      headers: { Authorization: `Bearer ${token}` }
    }

    axios.get(SERVER_URL, params, config)
    .then(respose => {
      console.log(respose.data);  
    }).catch(error => {
      console.log("Okay, something go wrong...");
      console.error(error);
    });
  }, []);
  1. Still not working... this are the console errors:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://script.google.com/macros/s/AKfycbwhEH2wBvRtaSdBICxgsNOWD7dA_R7-oG9gPScEoQFn7C4evds9/exec?action=update. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://script.google.com/macros/s/AKfycbwhEH2wBvRtaSdBICxgsNOWD7dA_R7-oG9gPScEoQFn7C4evds9/exec?action=update. (Reason: CORS request did not succeed).

Error: Network Error
    createError createError.js:16
    handleError xhr.js:91
    dispatchXhrRequest xhr.js:88
    xhrAdapter xhr.js:13
    dispatchRequest dispatchRequest.js:52
    promise callback*request Axios.js:61
    method Axios.js:76
    wrap bind.js:9
    App App.js:12
    React 6
        commitHookEffectListMount
        commitPassiveHookEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        flushPassiveEffectsImpl
    unstable_runWithPriority scheduler.development.js:653
    React 3
        runWithPriority$1
        flushPassiveEffects
        commitBeforeMutationEffects
    workLoop scheduler.development.js:597
    flushWork scheduler.development.js:552
    performWorkUntilDeadline scheduler.development.js:164
    js scheduler.development.js:187
    js scheduler.development.js:857
    Webpack 20
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        js
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        js
        __webpack_require__
        fn
        1
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>
Improve this question
4
  • 2
    Yes. You'd need oauth bearer token. Alternatively, You can try Execute as "Me"/"Anyone even anonymous"=> create slides and change ownership to user. This will however limit simultaneous executions to 30. Another option is to use google-slides-api directly Commented Sep 21, 2020 at 13:56
  • Ok, that's useful so thanks. Anyways, I'm trying on OAuth Playground to make these requests, and it's working! But when I try to replicate on my Axios request, the error persists. (From a novice StackOverFlow user to an expert, Should I update this post or it's better to make another with the new information? :) ) Commented Sep 21, 2020 at 14:09
  • 1
    In general, new questions should be asked in a new post. However, As there's no answer posted by anyone, if you think the issue is sufficiently related, you can go ahead and update the post. Side note: To notify users, use @ like @TheMaster to notify us. Commented Sep 21, 2020 at 14:15
  • 1
    So, You can't use oauth token directly from browser due to preflighting requests because of the forbidden header. Maybe if you have a backend server this may be possible. See stackoverflow.com/questions/62587453 (link edited) and stackoverflow.com/questions/57906169 Commented Sep 21, 2020 at 14:48
Related questions
1
Google script origin request url
4
CORS issue making AJAX request from React app > Node server > redirect to Google OAuth2 auth
24
How do i allow a CORS requests in my google script?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.