בעיית cors בריאקט 16

קורס React
#1

יש לי בעיה עם השיעור ריאקט ותקשורת מבוססת הבטחות, וכן עם תרגול התקשורת.
הקוד זורק לי שגיאה:
Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

#2

יכולה להדביק כאן את הקוד שלא עובד?

#3

מדובר בקוד מהשיעור על Ajax מבוסס הבטחות יחד עם קבצי הקונפיגורציה לריאקט 16

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [
        {
          Title: "Fargo",
          Year: "1996",
          imdbID: "tt0116282",
          Type: "movie",
          Poster: "http://ia.media-imdb.com/images/M/MV5BMTgxNzY3MzUxOV5BMl5BanBnXkFtZTcwMDA0NjMyNA@@._V1_SX300.jpg"
        }
      ],
      search: ''
    };
  }

  search = async () => {
    const res = await $.getJSON('http://omdbapi.com', {
      apikey: '4bc20e4a',
      s: this.state.search,
    });

    this.setState(oldState => ({results: res.Search }));
  };

  setSearchText = (e) => {
    const text = e.target.value;
    this.setState(oldState => ({ search: text }));
  };

  render() {
    return <div>
      <input 
        type="text" 
        onChange={this.setSearchText} />
      
      <button onClick={this.search}>Search</button>
      
      <ul>
        {this.state.results.map((item) => (
          <li key={item.imdbID}>
            <a href={"http://www.imdb.com/title/" + item.imdbID} target="_blank">
            {item.Title} ({item.Year})
            </a>
          </li>
        ))}
      </ul>
    </div>
  }
}

ReactDOM.render(<App />, document.querySelector('main'));
#4

הי,

זה קודפן שעובד בהתבסס על הקוד שלך

#5

זה לא הקוד שלי, זה הקוד מהשיעור.
יכול להיות שזה עובד בקוד פן ולא בפרויקט עם webpack ?
זו הקונפיגורציה:

const path = require('path');
const webpack = require('webpack');

const devBuild = process.env.NODE_ENV !== 'production';
const nodeEnv = devBuild ? 'development' : 'production';

module.exports = {
  context: __dirname + '/src', // `__dirname` is root of project and `src` is source
  entry: { 
    app: [
      './main.jsx',
    ],
    vendor: [
      'react',
      'react-dom',
    ],
  },
  output: {
    filename: '[name]-bundle.js',
    path: path.join(__dirname, '/dist'),
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },  
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
      },
    }),

    // https://webpack.github.io/docs/list-of-plugins.html#2-explicit-vendor-chunk
    new webpack.optimize.CommonsChunkPlugin({
      // This name 'vendor' ties into the entry definition
      name: 'vendor',
      // We don't want the default vendor.js name
      filename: 'vendor-bundle.js',
      // Passing Infinity just creates the commons chunk, but moves no modules into it.
      // In other words, we only put what's in the vendor entry definition in vendor-bundle.js
      minChunks: Infinity,
    }),
  ],
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              plugins: ["transform-class-properties"],
              presets: [
                ['es2015', { modules: false }],
                'react',
              ],
            }
          }
        ]
      },
    ]
  },
};

(הקונפיגורציה שנתנת לפרויקטים בריאקט 16)

image
image1920×1080 137 KB

אילו הודעות השגיאה

#6

הבעיה שאת טוענת את הקוד מקובץ HTML מקומי.
קוד שכולל בקשות Ajax (בלי קשר לריאקט - Ajax באופן כללי) צריך להיטען משרת ולא ממשהו שמתחיל ב file://

אם יש לך פייתון על המחשב הכי קל להפעיל שרת HTTP מקומי באמצעות פייתון בספריה הנוכחית, ואז לגלוש ל http://localhost:8000.

הפקודה מה Terminal כדי להפעיל את השרת המקומי היא:

python3 -m http.server
#7

אוקיי, תודה רבה, זה עובד עכשיו.

אגב פספסתי את זה בשיעור כלשהו? אני לא זוכרת שהייתה פקודה להפעלת שרת.

#8

זה לא הופיע כי לא קשור ל React.
יכול להיות שמוסבר בפרקים על Ajax בקורס Front End.

אבל באמת כדאי להוסיף על זה מילה באחד הוידאו-ים.

לייק 1
#9

טוב הוספתי הערה מתחת לסרטון עם ההוראות. תודה!
https://www.tocode.co.il/bundles/react/lessons/ajax

#10

אוקיי, אני עדיין לא מצליחה לעשות את התרגיל, למרות שאני משתמשת בשרת הפייתוני. את הדוגמא שהעליתי מקודם אני מריצה בהצלחה, אבל יש לי בעיה לגשת לכתובת השנייה

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

export default class Movies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      results: [
        
      ],
      search: ''
    };
  }

  search = async () => {
    const res = await $.getJSON('http://swapi.co/api/people/1/', {
    });
    console.log(res);
    this.setState(oldState => ({results: res.data }));
  };


  render() {
    this.search();
    return <div>
      
     { Object.keys(this.state.results).forEach(key => 
          <div key={key}>{key}:{this.state.results[key]} </div>)}
    </div>
  }
}

מוחזרת הודעת שגיאה:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://swapi.co/api/people/1/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

#11

הי אפרת,

אני לא יודע לגבי הודעת השגיאה שכתבת אבל לדעתי יש בקוד הזה הרבה בעיות שקשורות דווקא לריאקט ולא לקוד התקשורת. נסי להתקדם בשלבים:

  1. כתבי רק את פקודת התקשורת בסקריפט נפרד (שידפיס את התוצאה לקונסול) ותראה שזה עובד

  2. לאחר מכן שלבי אותו בתוך יישום React ותראי שאת מצליחה לכתוב רק שדה אחד ספציפי מתוך התוצאה לאלמנט div. שימי נקודות עצירה ועקבי אחר הודעות השגיאה אם זה לא עובד.

  3. רק אחרי שיש לך את (2) עובד תמשיכי לבנות את הלולאה שמציגה את כל המידע.