Реакция - проблема CORS На запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
Новая
       7

Реакция - проблема CORS На запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

0 голосов
/ 07 мая 2018

Я создаю приложение React для очистки контента с сайта через сервер, получения этих данных и отображения их на стороне клиента.

Я перебираю содержимое с сайта в server.js.

Я пытаюсь получить эти данные через вызов axios в app.js на стороне клиента.

Однако я получаю эту ошибку 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'));

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Это не проблема React, это общая проблема с любым приложением на основе JS. Причиной этого является ресурс, который вы пытаетесь очистить, а не ваш код.

Если вы еще не прочитали это, прочитайте это: Статья MDN CORS

0 голосов
/ 07 мая 2018

Вы можете попробовать добавить res.set('Access-Control-Allow-Origin', '*') до res.send()

...