Safari CORS issue - host not allowed by Access-Control-Allow-Origin - safari

Hi I am having an issue with CORS on safari. My request is working fine in every other browser except safari. I keep getting the error message [host] not allowed by Access-Control-Allow-Origin although the api specifically sets the request url in the response for both the OPTIONS request and the POST request.
I have researched this endlessly but nothing I have found has worked.
I have attached a screenshot from chrome which you can see all of the request and response headers and a screenshot from Safari where you can see the error. It is exactly the same request with exactly the same parameters.
Chrome:
Safari:
Thanks in advance!

Cross Origin Resource Sharing calls are generally blocked by browsers and thus API calls made from a website (in your case localhost:3004) to a remote host 52.85.173.227 (I think you have hosted it in Amazon's API Gateway).
What you need to do to enable CORS .
If you are using AMazon's API Gateway .
Click on the resources and in the Action , you have an option where you can enable CORS . Do that and it will add the headers to enable CORS .
Option on AWS API Gateway to enable CORS
Once you do this your response header of OPTIONS call will have "Access-Control-Allow-Origin" as "*" .
Thus your browser / web site will be able to make cross origin calls.
Hope this helps.

Related

How to Test CORS header

Our application supports CORS configurations headers.
I have configured testApp separately on two different hosts. Both the setups work independent of each other.
Application on host1 is configured with CORS header Access-Control-Allow-Origin to pointing to application on host2.
When I access the application pages of host2 am expecting it to show Access-Control-Allow-Origin header in response. But which is missing.
How to test to CORS headers to confirm its working properly or coded properly to support cross domain resource sharing.
You can leverage the fetch provided by the browser debugger (F12 on Chrome and Firefox, then go to console):
fetch('https://google.ca')
If you get a CORS error then that means the current site you opened your debugger with (Origin) is not included in the Access-Control-Allow-Origin header by the site you're fetching from.
You could test it with cUrl from terminal.
curl -v --request OPTIONS **'localhost:3000'** --header 'Origin: **http://some.origin.here**'; --header 'Access-Control-Request-Method: GET'
If your application returns the header: Access-Control-Allow-Origin then it should work. In my particular use case I set it to "*".
Otherwise testing will show an error, viewable from a browser console. It will say something like: Access to ... has been blocked by CORS policy
You can test if the CORS headers are working properly using your browser.
I used this one and hope this helps. You will find the instructions in it. https://github.com/cactuz/cors-tester-from-browser
You can test it with any rest client like POSTMAN Rest Client, or simply you can check it from browser console - > Network tab -> in xhr filter - check the header for the particular request. you can check request and response.

LinkedIn share API fails with "Response to preflight request doesn't pass"

i am using api call to share post on company page , when i do this from localhost it works fine, but when i put it on live VPS it fails
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin "MY ADDRESS I REMOVED FOR MY SECURITY" is therefore not allowed access.
I have googled it and found that it is a problem with the CORS headers , i have tried to add Header set Access-Control-Allow-Origin "*" in .htaccess i set but still nothing, any and all pointers or fixes would be appreciated , thanks
i use php 5.6 and apache 2.4.18
Adding this as answer so that anyone can find it. As #HoldOffHunger suggeted.
Ok so i managed to fix this error by adding headers not only to .htaccess but also to my ajax calls and it is working, so if you have same error fix it by adding Access-Control-Allow-Origin "*" headers in ajax call, change "*" with your origin.

Referrer and origin preflight request headers in Safari are not changing when user navigates

I have two web pages hosted on a.example.com and b.example. Each web page is including a script with a <script> tag, hosted on another domain and served with correct CORS headers.
At a certain point, user navigates from a.example.com to b.example.com.
Safari has here a strange behavior: the referrer and origin headers in preflight request are filled with a.example.com, making the server sending a bad value in Access-Control-Allow-Origin (and so the script can't be executed).
Is there a way to force Safari browser to send correct origin header in that kind of scenario ?
Does the cache policy for the script include Vary: Origin?
Respectively is there actually a second request after navigating to b.example.com?
If not, there is a chance that Safari is actually serving the script from cache - despite the Access-Control-Allow-Origin policy forbidding it to access the resource. Which is a conforming behavior, if the cache policy isn't configured correctly.
It seemed to be indeed a Safari bug.
The issue is not reproductible on Safari 10.0. It repro only on Safari 9.1.1 / 9.1.3.

Get an API key from external site

I have a site, which uses where2GetIt API. I need to get some data from this site,
but after making request, I get "No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'null' is therefore not allowed access" error.
I assume, that the problem is, that I have not access to API. How can I get the access to API?
If you're doing this with Javascript, make sure you understand CORS
...CORS gives web servers cross-domain access controls, which enable
secure cross-domain data transfers. Modern browsers use CORS in an API
container - such as XMLHttpRequest - to mitigate risks of cross-origin
HTTP requests.
See also this StackOverflow question How does Access-Control-Allow-Origin header work?

Setting up CORS Access-Control-Allow-Origin on Rackspace Cloud Files?

Can anyone provide any insight into how CORS works on Rackspace Cloud Files?
I tried setting the value of "Access-Control-Allow-Origin" to the url of my webserver but I can still access the public url of the object by just pasting it into a browser.
Maybe I misunderstand how CORS works? Setting the access control allow origin to my web server would only allow the file to be accessed from the web server. Me, as a user pasting the url into the web browser, would be from a different origin, no ?
The documentation at Rackspace isn't the best sometimes for stuff like this (or I'm looking in the wrong place...)
That's not really what CORS is for. Cross-origin resource sharing (CORS) is a mechanism that allows Javascript on a web page to make XMLHttpRequests to another domain, not the domain the Javascript originated from, see CORS.
It has nothing to do with making an object or container public/private.
On Rackspace, CORS works according to this doc.