The index.html file, from here I go to the content component of index.js:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React Tutorial</title> <!-- Not present in the tutorial. Just for basic styling. --> <script src="https://unpkg.com/react@15.3.0/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script src="https://unpkg.com/remarkable@1.7.1/dist/remarkable.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel" src="index.js"></script> </body> </html>

Here is the index.js file in which the content component was created; here you are sending a get request to the url http: // localhost: 8182 / city / Moscow by which I get json and output the cod parameter to the html page:

 var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentDidMount: function() { this.loadCommentsFromServer(); }, render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> </div> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function(comment) { return ( <Comment cod={comment.cod} key={comment.id}> {comment.cod} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); var Comment = React.createClass({ rawMarkup: function() { var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); return { __html: rawMarkup }; }, render: function() { return ( <div className="comment"> <h2 className="commentCod"> {this.props.cod} </h2> <span dangerouslySetInnerHTML={this.rawMarkup()} /> </div> ); } }); ReactDOM.render( <CommentBox url="http://localhost:8182/city/Moscow" />, document.getElementById('content') );

After sending a get request, an error occurs in the browser. Here are the browser logs with an error:

 d2xvc2nqkduarq.cloudfront.net/zr/js/adrns_c.js#HitachiXHTS547550A9E384_J2100050E8Z9HBE8Z9HBX Failed to load resource: net::ERR_NAME_NOT_RESOLVED babel.min.js:12 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ u @ babel.min.js:12 :8080/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:1 XMLHttpRequest cannot load http://localhost:8182/city/Moscow?_=1505505411770. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. index.js:14 http://localhost:8182/city/Moscow error

check get request in soapui

  • And where is the backend code? He is now more relevant to address the issue - Roman Danilov
  • I checked backend request in soapui, json comes with content - Sanaev
  • attached a picture with checking server backend - Sanaev
  • Through SoapUI it can work just as with Postman. Need a backend controller where the request goes - Roman Danilov
  • backend github.com/gibkin/TestWeather here you can see - Sanaev

1 answer 1

On the backend side, you need to create a class:

 @Configuration @EnableWebMvc public class WebConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**"); } }

And in your controller that accepts the request, add the @CrossOrigin annotation:

 @CrossOrigin @RestController @RequestMapping(value = "/", produces = MediaType.APPLICATION_JSON_VALUE) public class HomeController
  • and WebConfig to add to a project root? - Sanaev
  • You can right next to the Main class, you can create a config package and stuff it there - Roman Danilov
  • and @SptingBootApplication see it? will it be like bin? - Sanaev
  • Yes, he will, he is annotated with @Configuration - Roman Danilov
  • Thank you so much!!! - Sanaev