How to allow CORS in react.js?

by

there are 6 ways to do this in React,

number 1 and 2 and 3 are the best:

1-config CORS in the Server-Side

2-set headers manually like this:

resonse_object.header("Access-Control-Allow-Origin", "*");
resonse_object.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

3-config NGINX for proxy_pass which is explained here.

4-bypass the Cross-Origin-Policy with chrom extension(only for development and not recommended !)

5-bypass the cross-origin-policy with URL bellow(only for development)

"https://cors-anywhere.herokuapp.com/{type_your_url_here}"

6-use proxy in your package.json file:(only for development)

if this is your API: http://45.456.200.5:7000/api/profile/

add this part in your package.json file:
"proxy": "http://45.456.200.5:7000/",

and then make your request with the next parts of the api:

React.useEffect(() => {
    axios
        .get('api/profile/')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
});

More Related Contents:

  1. Origin is not allowed by Access-Control-Allow-Origin
  2. Trying to use fetch and pass in mode: no-cors
  3. Response to preflight request doesn’t pass access control check
  4. ReactJS convert HTML string to JSX
  5. Handle response – SyntaxError: Unexpected end of input when using mode: ‘no-cors’
  6. how to bypass Access-Control-Allow-Origin?
  7. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  8. Cross-Origin Read Blocking (CORB)
  9. Origin is not allowed by Access-Control-Allow-Origin
  10. Reactjs async rendering of components
  11. CORS error on same domain?
  12. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  13. React JS – Uncaught TypeError: this.props.data.map is not a function
  14. TypeError: Cannot read property ‘setState’ of undefined
  15. Is CORS a secure way to do cross-domain AJAX requests?
  16. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  17. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  18. Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  19. Cross Domain Resource Sharing GET: ‘refused to get unsafe header “etag”‘ from Response
  20. What’s to stop malicious code from spoofing the “Origin” header to exploit CORS?
  21. loading json data from local file into React JS
  22. Cross-origin resource sharing (CORS) concept
  23. CORS cookie credentials from mobile WebView loaded locally with file://
  24. CORS error for application running from file:// scheme
  25. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  26. Solve Cross Origin Resource Sharing with Flask
  27. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  28. React – setState() on unmounted component
  29. XMLHttpRequest: Network Error 0x80070005, Access is denied on Microsoft Edge (but not IE)
  30. CORS error with jquery

Leave a Comment