JulianBirch / cljs-ajax

simple asynchronous Ajax client for ClojureScript and Clojure
671 stars 136 forks source link

Cross Origin Requests #93

Closed whamtet closed 9 years ago

whamtet commented 9 years ago

To do cross origin requests on Chrome it is necessary to add the response header

         "Access-Control-Allow-Headers" "Content-Type"

in addition to the standard cors header

         "Access-Control-Allow-Origin" "*"

This could be mentioned in the documentation, I'm happy to update this for you if you want.

JulianBirch commented 9 years ago

That sounds like a very good idea, could I ask you to do two more things while you're there?

1) Add links for further reading for both headers 2) Split out "server side stuff" onto its own page. (I like how much documentation we've got, but Readme.md is looking like war & peace right now)

On Tuesday, August 18, 2015, Matthew Molloy notifications@github.com wrote:

To do cross origin requests on Chrome it is necessary to add the response header

     "Access-Control-Allow-Headers" "Content-Type"

in addition to the standard cors header

     "Access-Control-Allow-Origin" "*"

This could be mentioned in the documentation, I'm happy to update this for you if you want.

— Reply to this email directly or view it on GitHub https://github.com/JulianBirch/cljs-ajax/issues/93.

Sent from an iPhone, please excuse brevity and typos.

whamtet commented 9 years ago

Ok, I factored the doc into a doc folder, does that make things a bit clearer?

ghost commented 9 years ago

I'm thoroughly baffled. I upgraded to 0.5.1 just to be sure, but freeimages.pictures's API server tells me I've not included any Access-Control-Allow-Origin headers, despite following the instructions above. I don't believe it's the site, as CORS header-appending addons in Firefox and Chrome both intercept the request and get proper results back.

Is there something I'm missing?

(defn get-pictures! "Gets pictures from freeimages API using AJAX GET"
  [handler]
  (ajax/GET "http://freeimages.pictures/api/user/apikey/?keyword=foo"
            {:headers {"Access-Control-Allow-Headers" "Content-Type"
                       "Access-Control-Allow-Origin" "*"}
             :handler handler
             :error-handler error-handler
             :response-format :json
             :keywords? true}))

Current environment:

[[adzerk/boot-cljs "0.0-3308-0" :scope "test"]
  [adzerk/boot-cljs-repl "0.1.9" :scope "test"]
  [adzerk/boot-reload "0.3.1" :scope "test"]
  [pandeiro/boot-http "0.6.3" :scope "test"]
  [org.clojure/clojurescript "1.7.58"]
  [reagent "0.5.1"]
  [reagent-forms "0.5.12"]
  [reagent-utils "0.1.5"]
  [hiccup "1.0.5"]
  [mathias/boot-sassc "0.1.1" :scope "test"]
  [secretary "1.2.3"]
  [cljs-ajax "0.5.1"]]
whamtet commented 9 years ago

Hi Trevor,

it looks like you're doing this on the client side? You need to put those two headers in the server response in order for the browser to permit it. If you don't have control over the freeimages.pictures server then you're out of luck. The intention of cross origin requests is that they are only permitted on servers that explicitly allow it.

Matt

On 28 October 2015 at 14:26, Trevor Alexander notifications@github.com wrote:

I'm thoroughly baffled. I upgraded to 0.5.1 just to be sure, but freeimages.pictures's API server tells me I've not included any Access-Control-Allow-Origin headers, despite following the instructions above.

Is there something I'm missing?

(defn get-pictures! "Gets pictures from freeimages API using AJAX GET" [handler](ajax/GET "http://freeimages.pictures/api/user/apikey/?keyword=foo" {:headers {"Access-Control-Allow-Headers" "Content-Type" "Access-Control-Allow-Origin" "*"} :handler handler :error-handler error-handler :response-format :json :keywords? true}))

— Reply to this email directly or view it on GitHub https://github.com/JulianBirch/cljs-ajax/issues/93#issuecomment-151738674 .

ghost commented 9 years ago

My mistake; I must have gotten myself turned around reading too many CORS threads. Thanks for setting me straight.

whamtet commented 9 years ago

No probs.

On 29 October 2015 at 03:11, Trevor Alexander notifications@github.com wrote:

My mistake; I must have gotten myself turned around reading too many CORS threads. Thanks for setting me straight.

— Reply to this email directly or view it on GitHub https://github.com/JulianBirch/cljs-ajax/issues/93#issuecomment-151960197 .

loganpowell commented 5 years ago

I'm sorry for asking this on a closed issue, but my clojurescript project, when compiled to javascript to use in the browser is getting a CORS preflight channel did not succeed error in firefox (it works in chrome!). Is there any guidance for dealing with these kinds of errors?

whamtet commented 5 years ago

Can you post the code somewhere for us to reproduce the bug?

On Thu, 2 May 2019 at 18:48, Logan Powell notifications@github.com wrote:

I'm sorry for asking this on a closed issue, but my clojurescript project, when compiled to javascript to use in the browser is getting a CORS preflight channel did not succeed error in firefox (it works in chrome!). Is there any guidance for dealing with these kinds of errors?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/JulianBirch/cljs-ajax/issues/93#issuecomment-488642666, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOSIP7RMS6GK62RW3SPL4LPTLIH5ANCNFSM4BNVECEQ .

loganpowell commented 5 years ago

Thank you for the quick response! I've got a test website up here:

https://loganpowell.github.io/browser-test-citysdk/

If you open your console the payload gets logged there (give it a few seconds) in Chrome, but not in Edge or Firefox.

This is actually using an npm library I created for accessing Census statistics:

https://www.npmjs.com/package/citysdk/v/2.0.8

You can see the actual use of cljs-ajax in the library here:

https://github.com/loganpowell/census-geojson/blob/master/src/census/utils/core.cljc#L137