In my Google Chrome DevTools, preflight requests are combined together as one
"POST + Preflight"
However, on other machines, each POST + Preflight are separated into two, so for the above example, you would find 4 entries:
Preflight
POST
Preflight
POST
What is the setting in DevTools to combine the requests together like the screenshot above?
Worked it out, just have to filter it by "Fetch/XHR". Additionally we added the "Method" column as that's useful to have.
Related
I keep receiving the error below when I use Ionic Serve...
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
It only occurs with "post" request. The "get" requests I have work with no error. I've seen documentation for proxy's but I was not looking to go that route. I'm currently using the CORS Chrome plugin as a workaround right now, but will be shipping to mobile soon (Ionic view) for testing, which I believe I will still run into the CORS issue using Ionic View.
I have control of the API/server - using nginx.
Any suggestions?
Cors will not affect to mobile phone. The issue is in POST method in web view. In Post methods Browser send OPTIONS Request for security Purpose. It should handle in API. I used ASP.NET WEB API When Using localhost I Used Two Methods for post in Same Name but it's not proper way for doing this. You need to handle in Configuration to Igonre this. If you have API without parameters add headers "content-type x-www-form-urlencoded" to you request header. If there are parameters. use another method without parameters using same name.(Method overloadin). But when you are using livehost don't forget to remove redundant methods.
When the URL entered into the Chrome address bar results in the Save As dialog being popped (Content Type is not recognised), the network request never appears in the network tab in dev tools.
Is there a way I can track this to see the response headers from within Chrome, ie. without resorting to external tools like tcpdump or fiddler?
Yes, it's possible to access the request/response data in a more raw form using the network internals interface provided in Chrome. Navigate to chrome://net-internals/ (can't make it a link)
Click on the 'Events' links to see the recent requests and active sockets. I recommend using the filter at the top to remove some of the noise.
Select the relevant entry corresponding to the source type URL_REQUEST.
On the right hand side, you will see a whole load of data, but the request headers will appear under the HTTP_TRANSACTION_SEND_REQUEST_HEADERS section, and the response headers will appear under the HTTP_TRANSACTION_READ_RESPONSE_HEADERS section.
The following is an example from a simple Node server I set up to return a response with the 'Content-Type': 'application/octet-stream'} header. This forces the browser to download.
Normally both calls are shown, the pre-flight and the actual request. This is sometimes annoying. Is there a way to hide the pre-flights requests ?
Or is there a plugin to filter certain requests based on headers ?
The quickest way to do this is to filter on -method:OPTIONS.
Explanation: all pre-flight requests are via the HTTP OPTIONS method (opposed to POST or GET). This filter says "not method OPTIONS".
Note the leading hyphen because if you forget it, you'll only show pre-flight requests.
By default "All" requests will be displayed in network tab. To see OPTIONS requests, you can select "Other". To see only your web api requests, you can select "XHR" (which wont show OPTIONS request).
I'm developing a site where I am using the common Post/Redirect/Get pattern (https://en.wikipedia.org/wiki/Post/Redirect/Get) when submitting forms. In my particular case this is items for a todo list - so I'm POSTing to say https://example.com/group, processing that request server side adding the new item to a database, and then returning a 302 response (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3.3) to indicate the browser should redirect (GET) to https://example.com/group which then displays a list of all the todos submitted to the db. This partly works as expected on Opera Mini, but on both Opera Mini on Android (v12) and on the microemulator on Mac OSX (I haven't tested on other versions), the resulting page shows the list of todos without the new item, until I refresh the page manually at which point the list returned does include the new item.
I'm assuming what's happening here is that the page being shown after the redirect is the version which has been cached on Opera's proxy server previous to the POST request. If this is the case, is there a way I can indicate to the proxy server that it should display a fresh version of the page from my server rather than the cached version? I have also tried the more correct 303 status code (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3.4) but the same thing happens - although the spec says for this:
The 303 response MUST NOT be cached, but the response to the second (redirected) request might be cacheable'
although I have found no references to how this redirected request can me marked as non-cacheable. Incidentally all other browsers seem not to cache this redirected request at all.
Thanks very much for you help in advance.
Chris.
Can we send POST HTTP requests in Google Chrome when using Rest Services?
I have tried few extensions but I need directly from Chrome browser
I think, using the URL bar will always result in a GET.
To send POST requests from a browser, set up an HTML <form> with method="POST", use the action attribute for the REST-URL and input tags for other parameters.
You can do the post and get in the same way as the browser does.
You can use the header to put in information in key, value pair.
Here is a tutorial on how you can do it - Send POST data using XMLHttpRequest
But it would be better if you use chrome extension POSTMAN which is very extensive and clean for testing REST services.