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

Posted 2023-03-04

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

【英文标题】：React - CORS issue No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2018-10-16 20:42:56

【问题描述】：

我正在构建一个 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'));

【问题讨论】：

chrome.google.com/webstore/detail/allow-control-allow-origi/… 将此添加到您的 chrome 浏览器并将其切换为绿色

不，只有固定的 chrome 浏览器 - 这不是答案@HarishSoni - 这是一个懒惰的黑客：p

使用expressjs cors middleware修复服务器端

【参考方案1】：

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

如果您还没有阅读，请阅读：MDN CORS Article

【参考方案2】：

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