Webサイトに「「Access-Control-Allow-Origin」ヘッダーが存在しない」というエラーが突然表示されるのはなぜですか?

2020-05-23 javascript reactjs xmlhttprequest axios cors

私はDigitalOceanサーバーにサーバーブロックを作成していたため、同じ液滴から2つのWebサイトをホストできましたが、機能すると思いましたが、Webサイトが壊れていました。コードをVSCodeで開いてnpm startとnodemonで実行しましたが、Pokeapiからデータをプルしようとするとこのエラーが発生します。

起点 ' http:// localhost:3000 'から ' https://pokeapi.co/api/v2/pokemon/charizard/ 'へのXMLHttpRequestへのアクセスがCORSポリシーによってブロックされました:いいえ 'Access-Control-Allow-Origin'要求されたリソースにヘッダーが存在します。

これは、ライブWebサイトで発生するエラーと同じです。私は過去数時間を費やして、無駄に何ができるかを理解しようとしました。これがPokeapiの問題なのか、それとも私が問題なのか、携帯電話でWebサイトにアクセスしたところ、問題なく動作しているのではないかと思います。仕事を見つける必要があるし、壊れたウェブサイトで誰かが私を雇いたいとは思わないので、私は本当に困惑しています。誰かが私のコードの一部を見たい場合は、それを示します。どんな助けでも大歓迎です。

Answers

Kasey Changの助けを借りて、私は修正を見つけることができました。これは、修正前のサーバーファイルの先頭の外観です。

require('dotenv').config();
const {CONNECTION_STRING, SESSION_SECRET, SERVER_PORT} = process.env;
const express = require('express');
const app = express();
app.use(express.json());
const massive = require('massive');
const session = require('express-session');

自分のプロキシを作成したので、次のようになります。

require('dotenv').config();
const {CONNECTION_STRING, SESSION_SECRET, SERVER_PORT} = process.env;
const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.use(express.json());
const massive = require('massive');
const session = require('express-session');

今私のウェブサイトは再び働いています!これが同じ問題に遭遇する人を助けることを願っています。

Related