Skip to content

Instantly share code, notes, and snippets.

@lalitmee
Last active March 12, 2018 10:50
Show Gist options
  • Save lalitmee/70ba3e35aeb89909dd1b40f9e405933e to your computer and use it in GitHub Desktop.
Save lalitmee/70ba3e35aeb89909dd1b40f9e405933e to your computer and use it in GitHub Desktop.
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment