Vue.js and The Movie Database API returns error 403

Question

I am new to The Movie Database API. I created a Vue project and when I npm run serve and go to my localhost I see my app for 1 second and after that, I get a 403 with this error:

403 ERROR The request could not be satisfied. Request blocked. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation. Generated by cloudfront (CloudFront) Request ID: Pp4URUVnBrt7ovECZ1OEJPM9nW_N5ZE4sgxMuTAbG3A80reupMAAsw=="

When I debug I get this:

...\MovieAppVue\src\services\Network.js:1
import config from '../config/index'
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11
aiting for the debugger to disconnect...

When I test API key on their site I get 200 OK responses, so the API key is good. Can someone please check my repo to see what I am doing wrong? I don't know what I am missing here.

https://github.com/ivanradunkovic/MovieApp

import config from '../config/index'
import {storageService, storageKeys} from '../mixins/storageService'

class Network {
    static methods = {
        GET: 'GET',
        POST: 'POST'
    }

    addApiKey(url) {
        return `${url}?api_key=${config.API_KEY}`
    }

    addSessionId(url) {
        const sessionId = storageService.methods.storageGet(storageKeys.SESSION_ID)
            return sessionId ? `${url}&session_id=${sessionId}` : url
    }

    constructUrl(url, queryParams) {
        url = this.addApiKey(`${config.API_BASE_URL}${url}`)
        url = this.addSessionId(url)

        for (let key in queryParams) url += `&${key}=${queryParams[key]}`
            return url
    }

    async fetch(url, method, options = {}) {
        const res = await fetch(this.constructUrl(url, options.params), {
            method,
            body: JSON.stringify(options.data),
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            }
        })
        return await res.json()
    }
}

export default Network

Could you please post the relevant code to your question? No one wants to dig through your repository to try and find where you make the API call. — D Malan, Jan 22 '20 at 11:11
Sorry... Network.js is the problem. I put link to GitHub, because it's maybe something else. I edited original post with Network.js — Ivan Radunković, Jan 22 '20 at 11:22
`SyntaxError: Cannot use import statement outside a module` this might be worth a look - https://stackoverflow.com/questions/58357941/cannot-use-import-statement-outside-a-module — Craicerjack, Jan 22 '20 at 11:38
I try to change it but still the same. I am lost here. Not sure why is app showed for 1 second and after that I got 403. — Ivan Radunković, Jan 22 '20 at 11:50

score 0 · Answer 1 · answered Mar 23 '20 at 21:09

We had the same problem (same exact error message , anyway) in AWS Cloudfront when we ran parallel tests (hundreds on them all at once). We did not have the problem we ran them one after another.

In our case , we hit the "Request time out per origin". Our S3 origin got too slow under load.

Here are the list of limits: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html#limits-web-distributions

One way to confirm if indeed this is what root cause is , is to go to AWS Console and:

Cloudfront --> Cloudfront Distributions --> Choose the CF distribution in question ---> Click on "Usage" on the left frame.

That will show you graph of how much heavy lifting Cloudfront did and when. If the time matches, then the root cause is the same.

Vue.js and The Movie Database API returns error 403

1 Answers1