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>
Kirvo
  • 19
  • 5
  • 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 [tag:google-slides-api] directly – TheMaster Sep 21 '20 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? :) ) – Kirvo Sep 21 '20 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. – TheMaster Sep 21 '20 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 https://stackoverflow.com/questions/62587453/ (**link edited**) and https://stackoverflow.com/questions/57906169 – TheMaster Sep 21 '20 at 14:48

0 Answers0