I'm trying to get Chrome Logger working in an Angular app running against a PHP backend, but for some reason the X-ChromeLogger-Data header doesn't seem to be coming through when the API is accessed by the Angular app.
If I open the API's access point directly or hit it with a jQuery.get() request everything works fine, even if I make the ajax request from another domain. The API also works correctly otherwise, even when used by the Angular app. It's just that one header disappears somewhere along the way. It doesn't even appear in Chrome's console.
What could cause a header to disappear?
Here's a request made with jQuery.get()
Request:
GET /?action=load HTTP/1.1
Host: -
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
Origin: -
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Referer: -
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fi-FI,fi;q=0.8,en-US;q=0.6,en;q=0.4,sv;q=0.2
Response:
HTTP/1.1 200 OK
Date: Sat, 07 Nov 2015 10:41:22 GMT
Server: Apache/2.4.12 (Ubuntu)
X-Powered-By: PHP/5.6.11-1ubuntu3.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, X-ChromeLogger-Data
X-ChromeLogger-Data: eyJ2ZXJzaW9uIjoiNC4wIiwiY29sdW1ucyI6WyJsYWJlbCIsImxvZyIsImJhY2t0cmFjZSIsInR5cGUiXSwicm93cyI6W1siQVBJIiwiQVBJIHJlYWNoZWQiLCJ1bmtub3duIiwid2FybiJdXSwicmVxdWVzdF91cmkiOiJcLz9hY3Rpb249bG9hZCJ9
Content-Length: 15
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
And here's one from the Angular app:
Request:
GET /?action=load HTTP/1.1
Host: -
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: -
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Referer: -
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fi-FI,fi;q=0.8,en-US;q=0.6,en;q=0.4,sv;q=0.2
Response:
HTTP/1.1 200 OK
Date: Sat, 07 Nov 2015 10:34:33 GMT
Server: Apache/2.4.12 (Ubuntu)
X-Powered-By: PHP/5.6.11-1ubuntu3.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, X-ChromeLogger-Data
Content-Length: 15
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
The Angular code used to make the above request:
$http.get( endpoint, { params : { action : 'load' } } ).then(
function( response ) {
console.log( response );
},
function() {
console.log( 'fail' );
}
);
After Dvir's tip to further inspect the differences between the requests (with the aid of Fiddler) I finally manager to solve the problem. I was running the Angular app with Chrome's mobile device simulator turned on, and it turns out the Monolog ChromePHPHandler requires for the text "Chrome" to be present in the User-Agent header, which it wasn't when the simulator was turned on.
Related
Please help me to find an appropriate solution for Edge browser.
I found that Edge browser doesn't follow the Location header in case of HTTP 302 Found response both for GET and POST requests.
In short, the same code (see the explanation below):
works perfectly in FF/Chrome (all the headers are set for the initial call, the headers/cookies are set and sent for all redirected calls as well)
Edge browser ignores Location header / HTTP 302 response code (no redirect at all).
IE 11 browser ignores the header we set for the initial call (Content-Type) in the redirected call
page opened: https://example.com
async GET call made to https://some-service.io/login with custom headers set
Content-Type = application/json; charset=utf-8
X-Header = http://some-service.io/xxx-yyy-zzz
Note: different domains are used for the page and for the service
and with withCredentials enabled because of CORS, data attribute has an empty object (for axios call) or some dummy data (for javascript call) as we had an issue in Chrome/FF with headers for the redirected call:
Javascript version
function httpGetAsync(url, method, callback) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) {
console.log('DONE');
callback(xmlHttp.readyState + ':' + xmlHttp.status + ':' + xmlHttp.response);
return;
}
console.log(xmlHttp.readyState + ':' + xmlHttp.status + ':' + xmlHttp.response);
var headers = xmlHttp.getAllResponseHeaders();
console.log('headers: ' + headers.toString());
}
xmlHttp.open(method, url, true); // true for asynchronous
xmlHttp.withCredentials = true;
xmlHttp.setRequestHeader('Accept', 'application/json');
xmlHttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xmlHttp.setRequestHeader('X-Header', 'https://some-service.io/xxx-yyy-zzz');
xmlHttp.send("foo=bar&lorem=ipsum");
}
httpGetAsync('https://some-service.io/login', 'GET', function (response) {
console.log(response);
});
AXIOS version
...
defaultHeaders['Content-Type'] = 'application/json;charset=UTF-8';
defaultHeaders['X-Header'] = 'https://some-service.io/xxx-yyy-zzz';
...
axios({
method: 'GET',
url: 'https://some-service.io/login',
withCredentials: true,
headers: defaultHeaders,
data: {}
}).then(response => {
...
Server responds with HTTP 302, with Set-Cookie and Location: https://some-service.io/login/auth headers in the response, we need to send original headers and the cookies set with the redirected call to https://some-service.io/login/auth
For the redirected call to https://some-service.io/login/auth server responds with HTTP 200,
json-object returned in case if Content-Type is set in request headers:
Chrome/FF works perfectly, follow the redirects, the headers from the initial call are available for the redirected call as well, HTTP 200 returned with the valid json-object
Edge browser doesn't follow Location header value at all
IE 11 browser follow the redirect url from Location header but without Headers set in the initial call (added just for comparison)
RAW HTTP
Edge
-- OPTIONS (preflight)
OPTIONS https://some-service.io/login HTTP/1.1
Origin: https://example.com
Referer: https://example.com?uuid=38db98a3-f6f0-11e9-b2be-6814011b702b
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
Access-Control-Request-Headers: content-type,database,dictionarydomain,language,site,x-referer-epay
Access-Control-Request-Method: GET
Accept: */*
Accept-Language: en-US,en;q=0.8,cs;q=0.6,ru;q=0.4,uk;q=0.2
Accept-Encoding: gzip, deflate, br
Host: some-service.io
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Cache-Control: no-cache
-- GET Request
GET https://some-service.io/login HTTP/1.1
Origin: https://example.com
Referer: https://example.com?uuid=38db98a3-f6f0-11e9-b2be-6814011b702b
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.8,cs;q=0.6,ru;q=0.4,uk;q=0.2
Content-Type: application/json;charset=UTF-8
X-Header: https://some-service.io/xxx-yyy-zzz
Accept-Encoding: gzip, deflate, br
Host: some-service.io
DNT: 1
Connection: Keep-Alive
-- GET Response
HTTP/1.1 302 Found
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Date: Tue, 10 Dec 2019 12:26:08 GMT
Expires: 0
Location: https://some-service.io/login/auth
Pragma: no-cache
Set-Cookie: JSESSIONID=CC10DD73C968C42C5A007D27342BF0B5; Path=/; Secure
Set-Cookie: __VCAP_ID__=32ee654d-2947-49e4-4909-9bc7; Path=/; HttpOnly; Secure
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Vcap-Request-Id: ef27c9ae-fa5b-45b6-5c6a-9537b159e533
X-Xss-Protection: 1; mode=block
Content-Length: 0
Connection: keep-alive
-- GET Request for redirected call (https://some-service.io/login/auth, missing)
Chrome
-- OPTIONS (preflight)
OPTIONS https://some-service.io/login HTTP/1.1
Host: some-service.io
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: https://example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
Access-Control-Request-Headers: content-type,database,dictionarydomain,language,site,x-referer-epay
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://example.com?uuid=38db98a3-f6f0-11e9-b2be-6814011b702b
Accept-Encoding: gzip, deflate, br
Accept-Language: en,ru-RU;q=0.9,ru;q=0.8,en-US;q=0.7,en-GB;q=0.6
-- GET Request
GET https://some-service.io/login HTTP/1.1
Host: some-service.io
Connection: keep-alive
Origin: https://example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: application/json, text/plain, */*
X-Header: https://some-service.io/xxx-yyy-zzz
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://example.com?uuid=38db98a3-f6f0-11e9-b2be-6814011b702b
Accept-Encoding: gzip, deflate, br
Accept-Language: en,ru-RU;q=0.9,ru;q=0.8,en-US;q=0.7,en-GB;q=0.6
Cookie: JSESSIONID=998B805DAF1BBA4C76AB930702C49131; __VCAP_ID__=a3ed6e06-6e23-43ad-469a-e848
-- GET Response
HTTP/1.1 302 Found
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Date: Tue, 10 Dec 2019 10:33:02 GMT
Expires: 0
Location: https://some-service.io/login/auth
Pragma: no-cache
Set-Cookie: __VCAP_ID__=32ee654d-2947-49e4-4909-9bc7; Path=/; HttpOnly
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Vcap-Request-Id: e207bdaa-20a6-48a1-7f97-b0688d2f1f98
X-Xss-Protection: 1; mode=block
Content-Length: 0
Connection: keep-alive
-- GET Request for redirected call (https://some-service.io/login/auth)
GET https://some-service.io/login/auth HTTP/1.1
Host: some-service.io
Connection: keep-alive
Origin: https://example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: application/json, text/plain, */*
Database: master
X-Header: https://some-service.io/xxx-yyy-zzz
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://example.com?uuid=38db98a3-f6f0-11e9-b2be-6814011b702b
Accept-Encoding: gzip, deflate, br
Accept-Language: en,ru-RU;q=0.9,ru;q=0.8,en-US;q=0.7,en-GB;q=0.6
Cookie: JSESSIONID=998B805DAF1BBA4C76AB930702C49131; __VCAP_ID__=32ee654d-2947-49e4-4909-9bc7
-- GET Response
HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://example.com
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=UTF-8
Date: Tue, 10 Dec 2019 10:35:35 GMT
Expires: 0
Pragma: no-cache
Set-Cookie: __VCAP_ID__=a3ed6e06-6e23-43ad-469a-e848; Path=/; HttpOnly
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-Vcap-Request-Id: ad084e82-1038-4953-5f40-cfcf4f4c10d3
X-Xss-Protection: 1; mode=block
Content-Length: 16
Connection: keep-alive
{"some-value":0}
Notes
the main difference between Edge and Chrome - these two headers
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Edge/18.18362
Chrome/78.0.3904.108
In order to mitigate CORS implementation differences for different browsers, I decided to move CORS requests from FE side to BE side.
Small transparent proxy has been implemented to serve requests from FE to BE and call Service from BE using RestClient (or HttpClient) component which works perfectly with CORS and redirected calls in comparison with direct calls from FE to Service.
I am trying to make a Cross Origin delete request via fetch and its failing with a 403 (Exact Error Access to fetch at 'http://localhost:1180/api/deleteResource/name/something/city/Shenzhen%202' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.)
Here are my request and response headers -
General -
Request URL: http://localhost:1180/api/deleteResource/name/something/city/Shenzhen%202
Request Method: OPTIONS
Status Code: 403 FORBIDDEN
Remote Address: [::1]:1180
Referrer Policy: no-referrer-when-downgrade
Response Headers-
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: Content-Type,Content-Length,Server,Date
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type, Content-Length, Server, Date
Content-Length: 43
Content-Type: application/json
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Nov 2019 07:24:51 GMT
Server: Werkzeug/0.14.1 Python/3.6.5
X-Content-Type-Options: nosniff
Request headers-
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: access-control-allow-methods,access-control-allow-origin
Access-Control-Request-Method: DELETE
Connection: keep-alive
Host: localhost:1180
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
Whereas my GET requests are working just fine -
General -
Request URL: http://localhost:1180/api/getResources
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:1180
Referrer Policy: no-referrer-when-downgrade
Response Headers -
Access-Control-Allow-Credentials: false
Access-Control-Allow-Headers: Content-Type,Content-Length,Server,Date
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, PATCH
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type, Content-Length, Server, Date
Content-Length: 6164
Content-Type: application/json
Content-Type: application/json; charset=utf-8
Date: Mon, 18 Nov 2019 07:24:44 GMT
Server: Werkzeug/0.14.1 Python/3.6.5
X-Content-Type-Options: nosniff
Request Headers -
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:1180
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
I do understand that the preflight check doesn't happen for Simple GET & POST requests due to which my GET is successful, but still I don't get why my DELETE is failing as it has been allowed from the server. Can someone help me understand what the problem here is?
Your DELETE request has access-control-allow-methods,access-control-allow-origin headers, But In response, It only allows Content-Type, Content-Length, Server, Date headers. That's why it's throwing doesn't pass access control error.
Solution
Set Access-Control-Allow-Headers to allow Content-Type,Content-Length,Server,Date,access-control-allow-methods,access-control-allow-origin.
I am not sure about your Back-End technology, I can't provide code to allow above headers without knowing your back-end technology
I am trying to upload an file to ovh object storage (openstack swift), but run into issues.
In Chrome I get:
Refused to get unsafe header "Location"
I tried solving this with by adding 'Access-Control-Expose-Headers': 'Location' to the request headers. But error remains.
In Firefox I get following in the console:
OPTIONS XHR
[HTTP/1.1 200 OK 421ms]
Request Headers:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.5
Access-Control-Request-Headers: access-control-expose-headers,tus-resumable,upload-length,upload-metadata,x-auth-token
Access-Control-Request-Method: POST
Connection: keep-alive
Host: storage.gra1.cloud.ovh.net
Origin: http://localhost:8089
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0
Response Headers:
Allow: HEAD, GET, PUT, POST, OPTIONS, DELETE
Content-Length: 0
Date: Thu, 01 Feb 2018 14:55:05 GMT
X-IPLB-Instance: 12318
X-Openstack-Request-Id: txe638462886d66db5ad3c6-005a732a49
X-Trans-Id: txe638462886d66db5ad3c6-005a732a49
access-control-allow-headers: x-auth-token, upload-metadata, upload-length, tus-resumable, access-control-expose-headers
access-control-allow-methods: HEAD, GET, PUT, POST, OPTIONS, DELETE
access-control-allow-origin: *
vary: Access-Control-Request-Headers
POST XHR
[HTTP/1.1 204 No Content 579ms]
Request Headers
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.5
Access-Control-Expose-Headers: Location
Connection: keep-alive
Content-Length: 0
Host: storage.gra1.cloud.ovh.net
Origin: http://localhost:8089
Referer: http://localhost:8089/mywebpage
Tus-Resumable: 1.0.0
Upload-Length: 4885581
Upload-Metadata: modelId RmF2b3usrGVz,name MjIyLmpwZz==,type aW1hZ2UvanBlZz==
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0
X-Auth-Token: aSecret000000001
Response Headers
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: x-trans-id, content-language, X-Container-Read, expires, X-Storage-Policy, last-modified, etag, x-timestamp, pragma, cache-control, content-type, x-openstack-request-id
Content-Length: 0
Content-Type: text/html; charset=UTF-8
Date: Thu, 01 Feb 2018 14:55:05 GMT
X-IPLB-Instance: 12309
X-Openstack-Request-Id: txe638462886d66db5ad3c6-005a732a49
X-Trans-Id: txe638462886d66db5ad3c6-005a732a49
I do not know whether 'No Content' means successful, or something wrong, anyway the file is not send, so probably the last.
My questions:
- How to get rid of the Chrome error message
- How to get the file across.
Access-Control-Expose-Headers should be added to the response by the requested resource's provider (OpenStack Swift), not the client. What you need to do is to configure OpenStack Swift to add this header to its responses.
So how are you going to do it? OpenStack allows you to set/append custom values for Access-Control-Allow-Origin, Access-Control-Max-Age and Access-Control-Expose-Headers for each container. Please see this official document for details.
Example:
Let's create a container and set the custom header values we want to add to the Access-Control-Expose-Headers in the response to the requests made for the objects in this container.
curl -i -X PUT -H "X-Auth-Token: yourtoken" \
-H "X-Container-Meta-Access-Control-Expose-Headers: Location" \
http://192.168.56.3:8080/v1/AUTH_test/cont1
Now for every object you create in this container, you will see Location listed in Access-Control-Expose-Headers and get rid of the error message in Chrome.
You can see the rest of the CORS headers you can configure for each container, in the documentation I linked above.
I'm providing an ETag in the Response Header from the server to the browser when supplying a javascript file generated programatically.
On subsequent requests for that same javascript file the ETag does not get supplied back in Request Header by the browser.
I've tried this in both Chrome and IE, same results find below the request and response headers from original request and subsequent one.
Original Request Header
GET /v11/RUNTIME_SUPPORT.GetGlobalFormResources.aspx HTTP/1.1
Host: 101.152.80.163
Connection: keep-alive
Cache-Control: max-age=0
Accept: */*
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.66 Safari/537.36
Referer: http://101.152.80.163/v11/Web_Support.Html.aspx
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ro;q=0.6,es;q=0.4
Cookie: StaraspxOpenTabsCount=0; ASP.NET_SessionId=jpdkfccaf0zttoxyvys53ac3; STARaspx_SessionId=1006606D-F415-4AE5-AA4C-847625EB2BAE
If-None-Match: 0.0.459
Original Response Header
HTTP/1.1 200 OK
Cache-Control: public, max-age=604800
Content-Type: application/javascript; charset=utf-8
Content-Encoding: gzip
ETag: 0.0.459,0.0.0,0.00
Vary: Accept-Encoding
Server: Microsoft-IIS/8.5
ItemType: FORMS
Digest: e0d3a2bdee4c0a48bc4f61bb744755c21c1d6c19
X-Powered-By: ASP.NET
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1
X-Content-Type-Options: nosniff
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: callfrom, content-type, runtimecalltype
Access-Control-Allow-Credentials: true
Date: Tue, 12 Apr 2016 11:46:06 GMT
Content-Length: 31763
Subsequent Request Header
GET /v11/RUNTIME_SUPPORT.GetGlobalFormResources.aspx HTTP/1.1
Host: 101.152.80.163
Connection: keep-alive
Cache-Control: max-age=0
Accept: */*
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.66 Safari/537.36
Referer: http://101.152.80.163/v11/Web_Support.Html.aspx
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,ro;q=0.6,es;q=0.4
Cookie: StaraspxOpenTabsCount=0; ASP.NET_SessionId=jpdkfccaf0zttoxyvys53ac3; STARaspx_SessionId=1006606D-F415-4AE5-AA4C-847625EB2BAE
If-None-Match: 0.0.459
Subsequent Response Header
HTTP/1.1 200 OK
Cache-Control: public, max-age=604800
Content-Type: application/javascript; charset=utf-8
Content-Encoding: gzip
ETag: 0.0.459,0.0.0,0.00
Vary: Accept-Encoding
Server: Microsoft-IIS/8.5
ItemType: FORMS
Digest: e0d3a2bdee4c0a48bc4f61bb744755c21c1d6c19
X-Powered-By: ASP.NET
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1
X-Content-Type-Options: nosniff
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: callfrom, content-type, runtimecalltype
Access-Control-Allow-Credentials: true
Date: Tue, 12 Apr 2016 11:46:48 GMT
Content-Length: 31763
I've identified the root causes for ETags not working in my scenario:
I should have looked at the If-None-Match request header field rather than expecting an ETag field be provided to the server (more details here Header Field Definitions)
I should have not used commas in my ETag respose header field value, only the sub-string before the first comma gets sent back in request header field If-None-Match. In my case the ETag value in respose header was 0.0.459,0.0.0,0.00 and the subsequent request had 0.0.459 in the If-None-Match header field.
Response header from server now: HTTP/1.1 304 Not Modified :)
I am making a DELETE request from a Backbone application and am not sure why it fails with the error shown below.
OPTIONS Header
Here is my OPTIONS header which is a 200 Success
Request:
OPTIONS /revenues/674sf6 HTTP/1.1
Host: api2.revparmax.local
Connection: keep-alive
Access-Control-Request-Method: DELETE
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) ....
Access-Control-Request-Headers: token, accept, origin, x-requested-with, content-type
Accept: */*
Referer: http://localhost:3000/app/daily/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Response:
HTTP/1.1 200 OK
Date: Mon, 27 May 2013 20:01:32 GMT
Server: Apache/2.2.14 (Unix) DAV/2 mod_ssl/2.2.14 OpenSSL/0.9.8l PHP/5.3.1...
X-Powered-By: PHP/5.3.1
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: origin, x-requested-with, content-type, accept, TOKEN
Access-Control-Max-Age: 86400
Content-Length: 2
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json; charset=utf-8
DELETE header
But then my delete request fails...
Request:
DELETE http://api2.revparmax.local/revenues/674sf6 HTTP/1.1
TOKEN: 00899766786875875674557454
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost:3000/app/daily/
Origin: http://localhost:3000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) ....
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Error
XMLHttpRequest cannot load http://api2.revparmax.local/revenues/674sf6. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
Note
Oh - I should mention the model still gets deleted from the server but my problem is the Ajax deferred within my backbone app is all thrown off then because of this error.
Also, my request payload when it fails is [object Object] - could that be causing the problem?
Are you running Chrome? If so, then you may have hit the CORS localhost bug. See this SO question.