Last active
March 12, 2018 10:50
-
-
Save lalitmee/70ba3e35aeb89909dd1b40f9e405933e to your computer and use it in GitHub Desktop.
Reactjs and Laravel Server side rendering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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