时间戳

首页 > 解决方案 > Vue.js 和电影数据库 API 返回错误 403

javascript - Vue.js 和电影数据库 API 返回错误 403

问题描述

我是电影数据库 API 的新手。我创建了一个 Vue 项目，当我npm run serve转到我的应用程序时localhost，我看到我的应用程序 1 秒钟，然后，我收到一个 403 并出现此错误：

403 错误 无法满足请求。请求被阻止。我们目前无法连接到此应用或网站的服务器。可能有太多流量或配置错误。请稍后再试，或联系应用或网站所有者。如果您通过 CloudFront 向客户提供内容，您可以通过查看 CloudFront 文档找到解决问题并帮助防止此错误的步骤。由云端（CloudFront）生成请求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 密钥时，我得到了 200 个 OK 响应，所以 API 密钥很好。有人可以检查我的回购，看看我做错了什么吗？我不知道我在这里缺少什么。

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

标签： javascriptvue.jsthemoviedb-api

解决方案

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

在我们的例子中，我们点击了“每个来源的请求超时”。我们的 S3 源在负载下变得太慢了。

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

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

Cloudfront --> Cloudfront Distributions --> 选择有问题的 CF 发行版 ---> 点击左侧框架上的“Usage”。

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

推荐阅读