Options Request Successful but still getting Access-Control-Allow-Origin Error - javascript

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.

Related

Fetch request failing for DELETE method even though CORS headers are present

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

Authorization header when following redirects

When following redirects for a 303 response, in a Chrome, IE, and Firefox, the Authorization header is included.
That's an issue when a request to an internal service respond with a signed S3 URL in the Location header.
S3 will respond with a 400 response, and can't figure out which authentication method to use.
Request to internal service
GET INTERNAL_SERVICE HTTP/1.1
Pragma: no-cache
Origin: https://example.com
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,da;q=0.7,de;q=0.6
Authorization: Bearer g6YQjOy3BDu32es8xKdMRNpcQ2Fkrh5NG7y5fDs5
Accept: application/json, text/plain, */*
Cache-Control: no-cache
Authority: example.com
Host: example.com
Connection: close
Response
HTTP/1.1 303 See Other
Date: Tue, 13 Mar 2018 08:55:12 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 0
Connection: close
Server: nginx
location: S3_SIGNED_URL
Cache-Control: no-cache, private
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-
Requested-With
Access-Control-Max-Age: 28800
Request to S3
GET S3_SIGNED_URL HTTP/1.1
Pragma: no-cache
Origin: https://example.com
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,da;q=0.7,de;q=0.6
Authorization: Bearer g6YQjOy3BDu32es8xKdMRNpcQ2Fkrh5NG7y5fDs5
Accept: application/json, text/plain, */*
Cache-Control: no-cache
Authority: example.com
Host: BUCKET_NAME.s3.eu-central-1.amazonaws.com
Connection: close
Response
HTTP/1.1 400 Bad Request
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-request-id: REQUEST_ID
x-amz-id-2: AMZ_ID
Content-Type: application/xml
Transfer-Encoding: chunked
Date: Tue, 13 Mar 2018 09:06:41 GMT
Connection: close
Server: AmazonS3
<?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>InvalidArgument</Code>
<Message>Only one auth mechanism allowed; only the X-Amz-Algorithm
query parameter, Signature query string parameter or the Authorization
header should be specified</Message>
<ArgumentName>Authorization</ArgumentName>
<ArgumentValue>Bearer g6YQjOy3BDu32es8xKdMRNpcQ2Fkrh5NG7y5fDs5</ArgumentValue>
<RequestId>REQUEST_ID</RequestId>
<HostId>HOST_ID</HostId>
</Error>
Is there a way to instruct the browser to ignore the Authorization header, or force S3 to ignore the header?
Kind of a kludge, but there is a workaround to this situation by using CloudFront to front S3. More information posted here: ReactJS- remove HTTP header before redirect

Refused to get unsafe header "Location" in chrome and no content in firefox

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.

HTTP header ETag not sent back to server

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 :)

Response header disappears with Angular

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.

Categories