fetch-api

I have two apps one is a react front end and the second one is the rails-api app. I have been happily using isomorphic-fetch till I needed to send PATCH method to the server. I am getting: Fetch API cannot load http://localhost:3000/api/v1/tasks. Method patch is not allowed by Access-Control-Allow-Methods in preflight response. but the OPTIONS response from the server includes a PATCH method in a list of Access-Control-Allow-Methods: This is how the fetch is implemented: const API_URL = 'http://localhost:3000/' const API_PATH = 'api/v1/' fetch(API_URL + API_PATH + 'tasks', { headers: { 'Accept

I'm using fetch API within my React app. The application was deployed on a server and was working perfectly. I tested it multiple times. But, suddenly the application stopped working and I've no clue why. The issue is when I send a get request, I'm receiving a valid response from the server but also the fetch API is catching an exception and showing TypeError: failed to fetch . I didn't even made any changes to the code and it's the issue with all of the React components. I'm getting a valid response. But also getting this error at the same time. fetch(url) .then(res => res.json()) .then(data

This question already has an answer here: How do I return the response from an asynchronous call? 37 answers I'm quite new with JavaScript and react. I have a callback from a component that gets a customer_name from a server given a id. The fetch works and the console.log prints the fullname correctly, but the customer_name in the last .then is not set, and the functions returns an empty string. Why is that? // Gets the fullname of the customer from an id. tj_customer_name(id) { let customer_name = ''; fetch(`/customers/${id}.json`, { headers: API_HEADERS, credentials: 'same-origin' }) .then(

How to make server-side validation using redux-form and Fetch API? There are " Submit Validation " demo provided in the docs which says that recommended way to do server side validation is to return a promise from the onSubmit function. But where should I place that promise? As I understood onSubmit function should be my action. <form onSubmit={this.props.addWidget}>... Where this.props.addWidget is actually my action, provided below. import fetch from 'isomorphic-fetch'; ... function fetchAddWidget(widget, workspace) { return dispatch => { dispatch(requestAddWidget(widget, workspace)); return

I'm trying to fetch a file and return it's HTML. However it's not as simple as I'd have imagined. fetch('/path/to/file') .then(function (response) { return response.body; }) .then(function (body) { console.log(body); }); This returns an object called ReadableByteStream . How do I use this to grab the HTML file content? If I change the contents of /path/to/file to be a JSON string, and change the above to: fetch('/path/to/file') .then(function (response) { return response.json(); }) .then(function (json) { console.log(json); }); ... it returns the JSON correctly. How do I do fetch HTML? You

On making request like that: return fetch( 'http://localhost:8000/login', { method: 'POST', headers: new Headers( {"Content-Type": "application/json", "Accept":"application/json"} ), body: JSON.stringify( {'name': 'Tom', 'password': 'Soyer'} ) } ).then( response => { console.log(response);}) .catch(err => console.log(err)) request running with method OPTIONS instead POST. Only on adding mode: 'no-cors' request become POST: return fetch( 'http://localhost:8000/login', { method: 'POST', mode: 'no-cors', headers: new Headers( {"Content-Type": "application/json", "Accept":"application/json"} ),

I know that with the new Fetch API (used here with ES2017's async / await ) you can make a GET request like this: async getData() { try { let response = await fetch('https://example.com/api'); let responseJson = await response.json(); console.log(responseJson); } catch(error) { console.error(error); } } But how do you make a POST request? Long story short, Fetch also allows you to pass an object for a more personalized request: fetch("http://example.com/api/endpoint/", { method: "post", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, //make sure to serialize your

Here's what I have going: import 'whatwg-fetch'; function fetchVehicle(id) { return dispatch => { return dispatch({ type: 'FETCH_VEHICLE', payload: fetch(`http://swapi.co/api/vehicles/${id}/`) .then(status) .then(res => res.json()) .catch(error => { throw(error); }) }); }; } function status(res) { if (!res.ok) { return Promise.reject() } return res; } EDIT: The promise doesn't get rejected, that's what I'm trying to figure out. I'm using this fetch polyfill in Redux with redux-promise-middleware . Fetch promises only reject with a TypeError when a network error occurs. Since 4xx and 5xx

In my Project when conditions are insufficient my Django app send JSON response with message. I use for this JsonResponse() directive, Code: data = { 'is_taken_email': email } return JsonResponse(data) Now I want using Javascript fetch API receive this JSON response and for example show alert. I don't know how to use fetch API to do this. I want to write a listener who will be waiting for my JSON response from Django App. I try: function reqListener() { var stack = JSON.parse(data); console.log(stack); } var oReq = new XMLHttpRequest(); oReq.onload = reqListener; I want to compare JSON from my