javascript - Vue.js 和 The Movie Database API 返回错误 403

Question

我是 The Movie Database API 的新手。我创建了一个 Vue 项目，当我 npm run serve 并转到我的 localhost 时，我看到我的应用程序 1 秒钟，之后，我收到一个 403 错误:

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=="

当我调试时我得到这个:

...\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...

当我在他们的网站上测试 API key 时，我得到 200 OK 响应，因此 API key 是好的。有人可以检查我的 repo 协议(protocol)，看看我做错了什么吗？我不知道我在这里错过了什么。

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

Answer 1

我们在 AWS Cloudfront 中运行并行测试时遇到了同样的问题(相同的确切错误消息，无论如何)(同时对它们进行数百个测试)。我们没有遇到一个接一个地运行它们的问题。

在我们的例子中，我们点击了“Request time out per origin”。我们的 S3 源在负载下变得太慢了。

以下是限制列表: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html#limits-web-distributions

确认这是否确实是根本原因的一种方法是转到 AWS 控制台并:

Cloudfront --> Cloudfront Distributions --> 选择有问题的 CF 分布 ---> 单击左侧框架中的“Usage”。

这将向您显示 Cloudfront 完成了多少繁重工作以及何时完成的图表。如果时间匹配，则根本原因相同。