קריאת FETCH עזרה דחוףףף

[אנונימי123]

את צריכה להוסיף CORS:

Try adding the following middleware to your NodeJS/Express app (I have added some comments for your convenience):

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

מקור:

No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

i've created a small API using Node/Express and trying to pull data using Angularjs but as my html page is running under apache on localhost:8888 and node API is listen on port 3000, i am getting t...

stackoverflow.com

הוספתי ,
באמת אין בעיות אבטחה אבל אותו דבר....

 

[הייטקיסטית]

תקראי ל API ע"י HTTPS במקום HTTP

 

[אנונימי123]

תקראי ל API ע"י HTTPS במקום HTTP

שגיאה:

GET https://localhost:3000/api/get net::ERR_SSL_PROTOCOL_ERROR
Uncaught (in promise) TypeError: Failed to fetch

 

[הייטקיסטית]

אפשר צילום מסך של ה request?

 

[אנונימי123]

אפשר צילום מסך של ה request?

איזה ?

 

[הייטקיסטית]

איזה ?

את הקוד של ה fetch

 

[אנונימי123]

את הקוד של ה fetch

getList = () => {
    const request = new Request('http://localhost:3000/api/get');

    fetch(request, { method: 'GET', mode: 'no-cors' })
      .then((response) => console.log("response", response));
  }

 

[הייטקיסטית]

כעת, לאחר שהוספת CORS,
תנסי לבצע קריאה ללא הפרמטרים: (הדיפולט של fetch הוא GET)

ולשים את ה URL במקום ליצור אוביקט Request, כמו פה:

fetch('https://localhost:3000/api/get')
.then(response => response.json())
.then((data) => console.log("response"));

 

[yitzhak123]

אולי כך:

  const getList  = () => {
    fetch(`'http://localhost:3000/api/get'`)
    .then(response => response.json())
    .then(resJson => console.log(resJson, 'resJson'))
    .catch(err => console.log(err))
  }

 

[אנונימי123]

כעת, לאחר שהוספת CORS,
תנסי לבצע קריאה ללא הפרמטרים:
צפה בקובץ המצורף 687546

ניסיתי, אך הוא נותן שגיאה על הקורס

Access to fetch at 'http://localhost:3000/api/get' from origin 'http://localhost:3001' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8888' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
TobuyList.js:38 GET http://localhost:3000/api/get net::ERR_FAILED
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch

 

[אנונימי123]

אולי כך:

  const getList  = () => {
    fetch(`'http://localhost:3000/api/get'`)
    .then(response => response.json())
    .then(resJson => console.log(resJson, 'resJson'))
    .catch(err => console.log(err))
  }

לא עובד....

 

[הייטקיסטית]

לא עובד....

איזו שגיאה מופיעה בconsole? אם בכלל

 

[אנונימי123]

תודה רבה רבה לכולם!!!
בסוף הצלחתי לבינתיים את קריאת ה GET מצרפת את השינויים:
הקריאה ב nodejs:

var cors = require("cors");
const Joi=require('joi');
const express=require('express');
const { request } = require('express');
const app=express();
app.use(express.json())
const port = 3000

app.options('*', cors());

const MyList=[
    {id:1,name:'to do list'},
    {id:2,name:'to sleep'},
]

app.get('/api/get',(req,res)=>{
    console.log(MyList)
    return res.send(MyList);
    });

הקריאה ב react:

  getList = () => {
    debugger;
  axios.get('http://localhost:3000/api/get').then(res=>{
    console.log(res);
  })
  }

אין לי מילים על כל העזרה...
המוןן הצלחה בהכל
וחכו.. אולי אני עוד יצטרך אתכם שוב לpost

 

[הייטקיסטית]

אז יש כבוד ל Axios

 

[הייטקיסטית]

אין לי מילים על כל העזרה...
המוןן הצלחה בהכל

בשמחה
בהצלחה גם לך!

 

[אנונימי123]

אז יש כבוד ל Axios

חחחח
לגמרייי

 

[java]

אז יש כבוד ל Axios

בארוררר

 

[אנונימי123]

היי,
מישהו יודע אולי איך אני מגדירה לתגית שנוצרת בתוך פונקצית map אירוע כגון onclick??
הקוד פה לא מבצע לי את זה

        { this.state.items.map(item => <div   key="item.id">{item.name} <button onClick={e=>this.editItem(item)}>edit</button> </div>)}

 

[java]

מישהו יודע אולי איך אני מגדירה לתגית שנוצרת בתוך פונקצית map אירוע כגון onclick??

זה לא שונה מכל קליק אחר.
מוזר שזה לא מבצע.
log מתוך editItem לא מודפס?

וסתם שאלת אגב.
למה את משתמשת בclass ולא בreact hooks?

 

[אנונימי123]

זה לא שונה מכל קליק אחר.
מוזר שזה לא מבצע.
log מתוך editItem לא מודפס?

וסתם שאלת אגב.
למה את משתמשת בclass ולא בreact hooks?

תודהה אני ינסה...

תאמת שאני לא ממש למדתי react אני מתלמדת עם התרגיל..
מה יותר טוב class או react hooks??
ומה זה בעצם react hooks??