Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON

Additionally I am using create-react-app and would like to avoid setting up any server config.

In my client code I am trying to use fetch to do the same thing, but I get the error:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000‘ 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.

So I am trying to pass in an object, to my Fetch which will disable CORS, like so:

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

Interestingly enough the error I get is actually a syntax error with this function. I am not sure my actual fetch is broken, because when I remove the { mode: ‘no-cors’ } object, and supply it with a different URL it works just fine.

I have also tried to pass in the object { mode: 'opaque'} , but this returns the original error from above.

I belive all I need to do is disable CORS.. What am I missing?

Related Posts:

  1. How to allow CORS in react.js?
  2. where is create-react-app webpack config and files?
  3. No ‘Access-Control-Allow-Origin’ header is present on the requested resource—when trying to get data from a REST API
  4. Invariant Violation: Objects are not valid as a React child
  5. “SyntaxError: Unexpected token < in JSON at position 0"
  6. What is Virtual DOM?
  7. React.js: Set innerHTML vs dangerouslySetInnerHTML
  8. React – uncaught TypeError: Cannot read property ‘setState’ of undefined
  9. Understanding unique keys for array children in React.js
  10. How to do a redirect to another route with react-router?
  11. Jest spy on functionality
  12. Difference between npx and npm?
  13. Fetch: POST JSON data
  14. Reactjs – Form input validation
  15. TypeScript React.FC confusion
  16. Error Running React Native App From Terminal (iOS)
  17. Axios Delete request with body and headers?
  18. Loop inside React JSX
  19. Can’t resolve module (not found) in React.js
  20. How to implement navbar using react
  21. Loop inside React JSX
  22. Understanding React-Redux and mapStateToProps()
  23. how to render a react component using ReactDOM Render
  24. React this.setState is not a function
  25. Console logging for react?
  26. ‘react-scripts’ is not recognized as an internal or external command
  27. After $npm install, Getting Error: Cannot find module ‘../lib/utils/unsupported.js’
  28. React Native: this.setState is not a function
  29. React: trigger onChange if input value is changing by state?
  30. In reactJS, how to copy text to clipboard?
  31. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  32. You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
  33. React-Router only one child
  34. Getting “TypeError: failed to fetch” when the request hasn’t actually failed
  35. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  36. Setting a backgroundImage With React Inline Styles
  37. Response to preflight request doesn’t pass access control check
  38. How to pass props to {this.props.children}
  39. React eslint error missing in props validation
  40. OnChange event using React JS for drop down
  41. ESLint Parsing error: Unexpected token
  42. Setting onSubmit in React.js
  43. How to import image (.svg, .png ) in a React Component
  44. XMLHttpRequest cannot load XXX No ‘Access-Control-Allow-Origin’ header
  45. Uncaught TypeError: Cannot read property ‘props’ of null
  46. ReactJS: setTimeout() not working?
  47. React Uncaught Error: Target container is not a DOM element [duplicate]
  48. How to refresh a Page using react-route Link
  49. How to implement authenticated routes in React Router 4?
  50. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  51. Console is throwing Unterminated JSX contents error
  52. How to scroll to an element?
  53. How to handle the `onKeyPress` event in ReactJS?
  54. setInterval in a React app
  55. Cannot read property ‘bind’ of undefined. React.js
  56. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  57. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  58. ReactJS: setTimeout() not working?
  59. What does “export default” do in JSX?
  60. How to add multiple classes to a ReactJS Component?
  61. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  62. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  63. React.js – Can’t read property of undefined
  64. module.exports “Module is not defined”
  65. how to download file in react js
  66. React’s setState method with prevState argument
  67. onEnter not called in React-Router
  68. Pass react component as props
  69. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  70. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  71. Origin null is not allowed by Access-Control-Allow-Origin
  72. Async/await in componentDidMount to load in correct order
  73. Why use Redux over Facebook Flux?
  74. Local package.json exists, but node_modules missing
  75. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  76. Access Control Origin Header error using Axios
  77. Access to Image from origin ‘null’ has been blocked by CORS policy
  78. Cannot read property ‘getHostNode’ of null
  79. Can’t perform a React state update on an unmounted component
  80. how to use react require syntax?
  81. onClick not working React js
  82. This.props.dispatch not a function – React-Redux
  83. How to add a keyboard listener to my onClick handler?
  84. How to add a keyboard listener to my onClick handler?
  85. React router not showing browser history
  86. e.target.value on an input field ReactJs, how does it work?
  87. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  88. Jest encountered an unexpected token
  89. Uncaught ReferenceError: React is not defined
  90. What do these three dots in React do?
  91. Expected ‘this’ to be used by class method
  92. “Cross origin requests are only supported for HTTP.” error when loading a local file
  93. How to enable CORS in AngularJs
  94. How to disable button in React.js
  95. Update style of a component onScroll in React.js
  96. Correct modification of state arrays in React.js
  97. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  98. “React.Children.only expected to receive a single React element child” error when putting and in a
  99. AngularJS POST Fails: Response for preflight has invalid HTTP status code 404
  100. Await is a reserved word error inside async function

Leave a Comment