Soundcloud API /stream returns 403 in Firefox, but not in Chrome - firefox

I am trying to use the Soundcloud API. I make a request backend which works fine. I get the track id and with that i call api.soundcloud.com/tracks/242264498/stream?client_id=[REMOVED]. That link works fine in both Chrome and Firefox. However, when using it with jQuery/HTML it seems to fail in Firefox.
Request:
$(".jukebox").prop("src", 'https://api.soundcloud.com/tracks/'+track_id+'/stream?client_id=2487d5f911c4c44f0882c063ec104332').trigger('play');
Response (ONLY Firefox):
GET https://ec-media.sndcdn.com/C21H6loBzYez.128.mp3 [HTTP/1.1 403 Forbidden 23ms]
Running this in Firefox console plays the track for less than 1 second. I can hear it "stutter". Then it gives the 403.
$(".jukebox").prop("src", 'https://api.soundcloud.com/tracks/'+242264498+'/stream?client_id=2487d5f911c4c44f0882c063ec104332').trigger('play');
The HTML looks like this:
<audio class="audio_file jukebox" controls preload="auto" data-volume="0.25"></audio>

Just tested your code. And it worked fine even in firefox too.
https://ec-media.sndcdn.com/C21H6loBzYez.128.mp3
This url will simply not work, it needs access token id and other GET parameters. If SoundCloud is redirecting you to this url (with no GET parameters such as access token id and any others) then it may be something with SoundCloud as its not a 'normal' behavior.
I suggest you to re-test your code as it worked fine for me.

Related

ASP.NET Core MVC razor autocomplete some browser on production gave 404

I have implement autocomplete for search text box on my site.
it is working perfectly on all browsers.
But after production I got 404 error when I use Edge browser and samsung browser too.
But at same time on production it work perfectly with Chrome, Firefox, Brave and tor browsers
On edge I get this error in the console:
https://mysitedomainName/en/Home/ItemsMatchResultAjax **404**
In the browser development tools XHR I see the following:
Request URL: https://mysitedomainName/en/Home/ItemsMatchResultAjax
Request Method: POST
Status Code: 404
Remote Address: ip address:443
Referrer Policy: strict-origin-when-cross-origin
These errors do not appear in other browsers as mentioned above, it works perfectly!
Even in the development environment, when I use the same browsers such as Edge, it is working fine!
this is the signature of the action :
[HttpPost]
public async Task<JsonResult> ItemsMatchResultAjax(string strTag)
Any explanation that can help me in this situation?

Rendering issue after AJAX call

I'm using Bottle microframework (but I doubt my issue comes from it)
First if I define a simple redirect from /test_redirect to /x it works. So Bottle redirect() on simple case works.
Now I have a page /buy that uses Stripe Checkout (custom form) pointing to my server /stripe_process
Basically Stripe Checkout verifies credit card transaction, creates a token and POST it to my /stripe_process.
/stripe_process does its stuff (calling Stripe to charge the card) then when transaction is success, i use instruct Bottle to:
redirect('/transaction_summary')
My webserver logs show that indeed /transaction_summary is called and server-side script is processed (I put flags in my script to check this), and its template is returned (browser 'Network' analysis gives a 303 then a 200 on /transaction_summary, I even get the correct response data: seems 100% normal), but on the browser page nothing happens (I still have my initial page /buy in url field, instead of having been redirected to /transaction_summary): browser received the /transaction_summary response, a preview is visible on Chrome devtools preview mode, but is not displaying it!
Also if in /stripe_process I change redirect() with a simple return template(), same issue: no data is processed by the browser.
Any clue ? This behaviour have been observed on 100% my tests:
- Firefox / Windows
- Chrome / iOS 9 (iPad)
- Chrome / linux
- Iceweasel / linux
- Chrome / Android
- Chrome / OSX
I suspect it has something to do with Stripe Checkout taking over something (since redirect() works perfectly in my simple test), but I can't figure the reason and how to solve this.
If from Chrome-devtools-network section I go to last action (ie /transaction_summary download) and open /transaction_summary in new tab, it renders perfectly.
So it's not a bottle problem, nor webserver. I suspect more on Stripe checkout modal/popup behaviour
$(window).on('popstate', function() { handler.close(); }); is present as stripe docs instruct but anyway stripe_handler is properly closed after token received (I checked with handler.closed callback...)
EDIT:
If I replace redirect() with straight return template(), same issue: html stuff is downloaded by the browser, avail on preview, but not rendered on main window.
EDIT2:
if I add on my page a href to /test_redirect redirecting to /x it works.
Note that this manual redirect work after Stripe checkout. The only difference with Stripe sequence here is user interaction ('click' on href) but as my redirect is same domain, browsers shouldn't block redirect anyway.
Problem was that AJAX call used to send Stripe token to /stripe_process was handling redirect response. That's why on network I had 200 answer from webserver but all html page data was going into the AJAX callback and rendered. Thanks to Thomas for raising my nose from this issue.
Solution is /stripe_process to return 1 in case of success (instead of server-side redireciton), then make the redirection from AJAX success callback.

Cloudinary image goes 401 unauthorized on firefox when using modifiers in url

I have this image uploaded on cloudinary:
http://res.cloudinary.com/sylvain-bigonneau/image/upload/v1441562225/fvlmjerhn7vcli4hkbvx.jpg
It loads fine on every browser. But if I want to use modifiers in the url, such as:
http://res.cloudinary.com/sylvain-bigonneau/image/upload/c_fit,f_auto,h_590,w_768/v1441562225/fvlmjerhn7vcli4hkbvx.jpg
It loads fine on Chrome, but I get a 401 Unauthorized error when opening it on Firefox.
Is there some way I can fix this?
I am using Firefox 40.0.3 on Linux Mint 17.

Ajax Request gets blocked in Firebug but works in Genymotion. Why?

I am trying to build an "app version" of my website (a social network).
I am using PhoneGap + jQuery Mobile (i started learning them today).
The app simply needs to retrieve new posts from the website and show them to the user. Therefore I thought a simple Ajax Request would do the job.
So, i created a php test file on the server (URL: http://www.racebooking.net/it/moto/app/get_post_test.php), which simply Echoes Alien contact SUCCESS!
I've made a simple html page in localhost (on my PC) called index.html with a div called #post-container and an AJAX request:
var root = "http://www.racebooking.net/it/moto"
$.get(root + "/app/get_post_test.php", function(data){
$("#posts-container").html(data);
});
If everything is correct, i expect to see Alien contact SUCCESS! in the post-content div.
What happens looks strange:
If i run the app from eclipse using Genymotion, everything works fine
and i see the message Alien contact SUCCESS! -> the AJAX request
went fine
If i open the index.html file on firefox, i don't see anything
and FireBug informs me that the cross-origin request was blocked.
He also tells me to activate CORS.
1) Why is that happening and how can i make FireBug work (which is better and faster for debugging)?
2) Am i following the right procedure or i am missing something?
I found the solution from this post.
I just needed to add header('Access-Control-Allow-Origin: *'); at the top of my php file.

Fine Uploader Response Error OnComplete In IE 10

Manual Uploader Working Fine with All Browser expect IE 10, i am not getting correct Response From the Server it is Showing on onComplete "No Valid message Received from Loaded iframe For i frame Name 1_97604 cec......".
File are uploading into the cloudbees server but not getting correct Response From the server.
In case of Other browser i am getting Response.success = true, but For IE 10 its undefined, how to handle this error. Please help me Out for this.
Regards
Yogesh
You aren't using IE10 if that is the message you are seeing. Most likely, you are using IE9 or older. The message you are seeing is logged by the form uploader, which is never used if you are uploading via IE10. Perhaps you are running IE10 in IE9 or IE8 mode. Either way, the message indicates that you are working in a cross-origin environment (you have set the cors.expected option to true) but are not returning the proper response from your server. Note that older browsers, such as IE9 and older, utilize form submits, targeting an iframe, to upload files. In order to access the contents of that cross-origin iframe, the iframe needs to post a message containing the server response to Fine Uploader's window. This is all very easy to do, all you need to do is return a text/html response from your server that looks something like this:
"{\"success\": true, \"uuid\": \"9da17ad5-ad6a-40cd-81b5-226e837db45b\"}<script src=\"http://<YOUR_SERVER_DOMAIN>/iframe.xss.response-<VERSION>.js</script>.js\"></script>"
The javascript file mentioned in the script tag is provided in the Fine Uploader released zip file. It does all of the work for you. You must return a JSON response before the script tag, as illustrated above, and the response must include the UUID of the associated file.
You should read about cross-origin support either in the associated blog post.

Resources