React - CORS 问题请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

我正在构建一个 React 应用程序，通过服务器从站点抓取内容并获取该数据并将其显示在客户端。

我正在从 server.js 中的网站抓取内容。

我正在尝试通过客户端 app.js 中的 axios 调用获取该数据。

但是，我收到此 CORS 错误，“请求的资源上不存在‘Access-Control-Allow-Origin’标头”。

你能帮我解决这个问题吗？

这是我的 server.js ：

 var request = require('request'); var cheerio = require('cheerio'); var express = require('express'); var app = express(); app.get('/news/:newsName', function(req, res) { var data = ""; const techCrunchURL = "https://techcrunch.com/2018/05/04/nsa-triples-metadata-collection-numbers-sucking-up-over-500-million-call-records-in-2017/"; var techCrunchNewsItems = { bodyOne: '', bodyTwo: '' }; switch(req.params.newsName) { case 'tech-crunch': request(techCrunchURL, function(err, response, html) { var $ = cheerio.load(html); if($('.article-content').children('p').eq(0).text().split(' ').length > 50) { techCrunchNewsItems.bodyOne = $('.article-content').children('p').eq(0).text(); } else { techCrunchNewsItems.bodyOne = $('.article-content').children('p').eq(0).text(); techCrunchNewsItems.bodyTwo = $('.article-content').children('p').eq(1).text(); } data = techCrunchNewsItems; res.send(JSON.stringify(data)); }); break; default: data = 'Please type in correct news source'; break; } }); var server = app.listen(8082, function () { var host = server.address().address; var port = server.address().port; console.log("Example app listening at http://%s:%s", host, port); });

这是我的 app.js ：

 import React, { Component } from 'react'; import { render } from 'react-dom'; import axios from 'axios'; import '../css/style.css'; export default class Hello extends Component { constructor() { super(); this.techCrunchNewsDate = ''; } componentDidMount() { axios.get(`http://localhost:8082/news/tech-crunch`) .then(res => { const data = res.data; this.techCrunchNewsDate = data; }); } render() { console.log(this.techCrunchNewsDate); return ( <div> Hello from react </div> ); } } render(<Hello />, document.getElementById('app'));

Answer 1

您可以尝试在res.send()之前添加res.set('Access-Control-Allow-Origin', '*') res.send()

Answer 2

这不是 React 问题，而是任何基于 JS 的应用程序的普遍问题。 您尝试抓取的资源是导致此问题的原因，而不是您的代码。

如果你还没有读过，请阅读： MDN CORS 文章