lalitmee
3/12/2018 - 10:38 AM

Reactjs and Laravel Server side rendering

Reactjs and Laravel Server side rendering

// CreateItem.js

import React, { Component } from 'react';
import { Router, Link } from "react-router";
import {
    Item,
    Card,
    Image,
    Message,
    Header,
    Button,
    Container,
    Segment,
    Label,
    Icon,
    Grid
}
from 'semantic-ui-react';

import 'semantic-ui-css/semantic.min.css';


class CreateItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            image: []
        };
    }

    componentDidMount() {
        
        fetch('https://seo-react-test-ajayfresholives.c9users.io/go', {
                mode: "no-cors",
                method: "GET",
                headers: {
                    'Content-type': 'application/json'
                }
            })
            .then(response => response.text())
            .then((response) => {
                 
                this.setState({
                    image: JSON.parse(response)
                })
                console.log(this.state.image.canApprove);
                //console.log(image);
                //console.log(this.state.image); // returns empty string
                //console.log(JSON.stringify(this.state.image));
            })
            .catch(error => { console.log('request failed', error); });
            
            
    }
    
    render() {
        if (this.state.image.length === 0) {
            return null;
        }
        console.log("UP");
        const images = this.state.image.map((item, i) => (

            <Card key={item.id}>
                    <Image size="huge" src={item.URL} />
                    <Card.Content>
                    <Card.Header>
                        {item.name}
                    </Card.Header>
                      <Card.Description>
                        {item.description}
                      </Card.Description>
                    </Card.Content>
                  </Card>

        ))

        return (
            <Container>
            

            <h1>Image List</h1>
            
            <Grid.Row>
                {images}
            </Grid.Row>
                </Container>

        )

    }
}

export default CreateItem;

ERROR in console:-  
request failed SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at entry-client.js:30487
    at <anonymous>

Payload:-                   
[
    {
        "URL": "https://images.pexels.com/photos/761543/pexels-photo-761543.jpeg?w=940&h=650&auto=compress&cs=tinysrgb",
        "description": "This is an image 1",
        "id": 1,
        "name": "Image name"
    },
    {
        "URL": "https://images.pexels.com/photos/761543/pexels-photo-761543.jpeg?w=940&h=650&auto=compress&cs=tinysrgb",
        "description": "This is an image 2",
        "id": 2,
        "name": "Image name 2"
    }
]
                   
Error on removing the mode:-                   
Failed to load https://seo-react-test-ajayfresholives.c9users.io/go: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://laravel-server-side-rendering-ajayfresholives.c9users.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.