Heroku 后端 Node.js 和 Netlify 前端 react 应用程序已被 CORS 策略阻止：答案

【问题标题】：Heroku backend Node.js and Netlify frontend react app has been blocked by CORS policy:Heroku 后端 Node.js 和 Netlify 前端 react 应用程序已被 CORS 策略阻止：
【发布时间】：2021-06-03 13:45:32
【问题描述】：

Heroku 后端 Node.js 和 Netlify 前端反应应用已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我已经看过很多关于此的帖子，但我似乎无法修复造成此错误的原因。当然，我相信这与CORS有关。但正如您所见，我添加了多个版本的 CORS 中间件以使其正常工作。本地一切都很好。生产/现场是我遇到问题的地方：

已从源“https://seb-youtube-api.netlify.app”访问“https://seb-youtube-api.herokuapp.com//videos?page=1&limit=50”处的 XMLHttpRequest被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这是我使用 Node.js 和 Express.js 的后端服务器他们对 youtube API 进行了简单的调用。

      require('dotenv').config();
      const express = require('express');
      const bodyParser = require('body-parser')
      const app = express();
      const cors = require('cors')
      const chalk = require('chalk');
      const { google } = require('googleapis');
      const youtube = google.youtube('v3'); // initialize the Youtube API library 


      // Middleware 
      app.use(cors());
      app.use(bodyParser.json());

      /******************** GET REQUEST TO VIDEOS *********************/
      app.get('/videos', async (req, res) => {
        const results = await fetchYoutubePlaylist();
        res.json(results)
      })

      // /******************** POST REQUEST, USER SEARCH *********************/

      app.post('/videos', async (req, res) => {
        console.log('POST QUERY',req.body)
        const query = req.body
        res.body = await fetchYoutubeSearch(query)
        console.log("RES POST", res.body)
        res.json(res.body) 
      })


      app.use('*', cors(), (req, res) => {
        return res.status(404).json({ message: 'Not Found' });
      });


      // CORS
      app.use((req, res, next) => {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type,multipart/form-data,Authorization');
        res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE');
        if (req.method === 'OPTIONS') {
          return res.send(204);
        }
        next();
      });

      /******************** FIRST YOUTUBE API CALL *********************/
      const fetchYoutubePlaylist = async () => {
        try {
          const {data} = await youtube.playlistItems.list({
            key: process.env.YOUTUBE_API_TOKEN,
            part: ['snippet'],
            maxResults: 50,
            playlistId: "UUBh8XcZST_JTHt-IZDxT_pQ"
          })
          console.log(data)
          return data.items
        } catch(err) {
          console.log(chalk.red(err))
        }

      }


      /******************** SECOND YOUTUBE API CALL *********************/
      const fetchYoutubeSearch = async ({query}) => {
        console.log(query)
        try {
          const {data} = await youtube.search.list({
            key: process.env.YOUTUBE_API_TOKEN,
            part: ['snippet'],
            q: query,
            channelId: 'UCBh8XcZST_JTHt-IZDxT_pQ',
            order: 'date',
            type: 'video',
            maxResults: 50
          })
          console.log('YOUTUBE SEARCH', data)
          return data.items
        } catch(err) {
          console.log(chalk.red(err))
        }
      } 




      /******************** LIST TO PORT  *********************/

      const port = process.env.PORT || 3001;
      app.listen(port, () => console.log(`Listing on port ${port}`));

【问题讨论】：

标签： node.js reactjs heroku cors netlify

【解决方案1】：

是您的浏览器阻止 CORS 的问题吗？ Heroku 的东西有时会发生在我身上。根据您使用的浏览器，有一些浏览器扩展可以阻止/取消阻止 CORS

【讨论】：

好问题。我刚刚尝试了不同的浏览器（safari）。我通常使用谷歌浏览器。都不行。

【解决方案2】：

仅使用 app.use(cors()); 就可以了。相反，在您设置此类变量的任何位置仔细检查您在 heroku 和/或 netlify 上的配置变量（env vars）。有时，CORS 错误可能会产生误导，实际上是与环境变量有关的连接错误。

【讨论】：