Heroku后端Node.js和netflix前端react app被CORS策略屏蔽:

Question

Heroku后端Node.js和netflix前端react app被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}`));

Answer 1

是您的浏览器阻止CORS的问题吗?我有时候也会遇到这种事。有浏览器扩展来阻止/取消阻止CORS取决于你使用的浏览器

Answer 2

只使用app.use(cors());就可以了。相反，在heroku和/或netlify上仔细检查你的配置变量(env Vars)，无论你在哪里设置这些变量。有时，CORS错误可能会误导，实际上是连接错误，更多的是关于您的环境变量。