fetch-api | 易学教程

Receive and process JSON using fetch API in Javascript

阅读更多关于 Receive and process JSON using fetch API in Javascript

问题 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

When using mode: no-cors for a request, browser isn’t adding request header I’ve set in my frontend code

阅读更多关于 When using mode: no-cors for a request, browser isn’t adding request header I’ve set in my frontend code

问题 in my React app, I have the following API POST to allow the user to edit their profile (name and image). static updateProfile(formData, user_id) { const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, { headers: new Headers({ 'Authorization': getBearerToken() }), mode: 'no-cors', method: "POST", body: formData }); return fetch(request).then(response => { return response.json(); }).catch(error => { return error; }); } The problem with the above is the header with the

Fetch API, custom request headers, CORS, and cross-origin redirects

阅读更多关于 Fetch API, custom request headers, CORS, and cross-origin redirects

I need to make an HTTP GET request with custom request headers in-browser and process the result as it streams in. The Fetch API is ideal for this: fetch('https://example.com/resource', { method: 'GET', headers: { 'X-Brad-Test': 'true' }, cache: 'no-store', mode: 'cors' }).then((res) => { const reader = res.body.getReader(); // etc. }); This works quite well. Since there are custom headers, the browser pre-flights the request with an OPTIONS request to /resource . I have configured my server to respond with a 204 No Content and the following headers: Access-Control-Allow-Headers: X-Requested

Only in Chrome (Service Worker): '… a redirected response was used for a request whose redirect mode is not “follow” '

阅读更多关于 Only in Chrome (Service Worker): '… a redirected response was used for a request whose redirect mode is not “follow” '

When I refresh (or go offline) in Chrome then I get "This site can't be reached" and the following logged to console: The FetchEvent for "http://localhost:8111/survey/174/deployment/193/answer/offline/attendee/240/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow". . When I refresh in Firefox everything works fine. Could someone explain why this is happening? Here is my simplified SW. importScripts("/static/js/libs/idb.js") var CACHE_NAME = "upshot-cache-version3" var urlsToCache = [...] self.addEventListener("install",

custom headers are not added to Request object

阅读更多关于 custom headers are not added to Request object

问题 I'm trying to use fetch api. First i create a new Headers() object: var oHeaders = new Headers({ 'Accept': 'application/json', 'Content-Type': 'application/json', "X-DocuSign-Authentication": '{"Username":"xxx","Password":"xxx","IntegratorKey":"xxx"}' }) After headers is instantiated if i try to log headers everything is correct. oHeaders.forEach(function(v){console.log(v)}) //logs: 2 application/json {"Username":"xxx","Password":"xxx","IntegratorKey":"xxx"} the i create the Request object:

Fetch API to force download file

阅读更多关于 Fetch API to force download file

问题 I'm calling an API to download excel file from the server using the fetch API but it didn't force the browser to download, below is my header response: HTTP/1.1 200 OK Content-Length: 168667 Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Server: Microsoft-IIS/8.5 Content-Disposition: attachment; filename=test.xlsx Access-Control-Allow-Origin: http://localhost:9000 Access-Control-Allow-Credentials: true Access-Control-Request-Method: POST,GET,PUT,DELETE,OPTIONS

Fetch API vs XMLHttpRequest

阅读更多关于 Fetch API vs XMLHttpRequest

I know that Fetch API uses Promise s and both of them allow you to do AJAX requests to a server. I have read that Fetch API has some extra features, which aren't available in XMLHttpRequest (and in the Fetch API polyfill, since it's based on XHR ). What extra capabilities does the Fetch API have? There are a few things that you can do with fetch and not with XHR: You can use the Cache API with the request and response objects; You can perform no-cors requests, getting a response from a server that doesn't implement CORS. You can't access the response body directly from JavaScript, but you can

fetch api not returning the Location header

阅读更多关于 fetch api not returning the Location header

问题 Here are my headers copied from chrome Version 52.0.2743.82 (64-bit) (have yet to determine whether this is isolated to chrome) Request URL:http://localhost:8080/users Request Method:POST Status Code:201 Remote Address:[::1]:8080 Response Headers view parsed HTTP/1.1 201 Access-Control-Allow-Origin: http://localhost:9000 Vary: Origin Access-Control-Allow-Credentials: true X-Application-Context: application:xenoterracide,development Location: http://localhost:8080/users/17 X-Content-Type

set withCredentials to the new ES6 built-in HTTP request API : Fetch

阅读更多关于 set withCredentials to the new ES6 built-in HTTP request API : Fetch

How to set withCredentials=true to fetch which return promise. Is the following correct : fetch(url,{ method:'post', headers, withCredentials: true }); I think the MDN documentation talked about everything about http-requesting except this point: withCredentials Got it here : credentials: 'include' and not withCredentials: true 来源： https://stackoverflow.com/questions/40543372/set-withcredentials-to-the-new-es6-built-in-http-request-api-fetch

Slack incoming webhook: Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response

阅读更多关于 Slack incoming webhook: Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response

I try to post a slack message via the fetch API in a browser: fetch('https://hooks.slack.com/services/xxx/xxx/xx', { method: 'post', headers: { 'Accept': 'application/json, text/plain, */*', 'Content-type': 'application/json' }, body: JSON.stringify({text: 'Hi there'}) }) .then(response => console.log) .catch(error => console.error); }; I get the following error message: Fetch API cannot load: https://hooks.slack.com/services/xxxxxxx/xxxxx. Request header field Content-type is not allowed by Access-Control-Allow-Headers in preflight response. What to do? That Slack API endpoint unfortunately