Getting CORS error When Using Spotify Open APIs - angularjs

I'm getting CORS error while trying to get some data through Spotify's Open APIs such as API/v1/search?type=album&q=... and API/v1/albums/{id} in a Simple Angular 4 Application that searches for albums with a Query then tries to show that specific album Information.
I assume that these two APIs are open and don't need any kind of authorization. So How can I get data from these two when there's no JSONP method available without getting CORS error and without Authorization?
Passing client_id doesn't help I'm afraid.

As no one posted a proper answer, I ended up writing and using a simple wrapper over Spotify's API. Everything's working now! No more darn CORS errors or anything! :)

Related

API access denied in ReactApp, how to fetch data from API server

I will ask again. Hope someone who has experienced the same issue offer me some help.
Background: to build a translation app from Swedish to English with ReactApp.
Issue: when access an open URL with axios.get(https://dictapi.lexicala.com/test), I am able to get data, but if replace with axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), resulted in GET https://dictapi.lexicala.com/search?source=global&language=sv&text=asdf 401
I suppose I need to find a way to embed my user credentials for api provider in my ReactApp code, everytime before use axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), I should make a login act to this api server. Because, I can access api server with URL in chrome, e.g. https://dictapi.lexicala.com/search?source=global&language=es&text=azul due to the fact chrome saved my user credentials.
Please indicate how to search the right question for sovling this problem? I am not expert with ReactJS and neither am I an English native speaker. What techniques should I refer to ?
The question is not related to React. It's related to a network call.
Looking at https://dictapi.lexicala.com looks like it requires a basic auth.
So probably what do you want to check is that question: How to send Basic Auth with axios
I haven't signed up for the service so I cant analyse the API, but I imagine you're assigned an API key - you'll want to either send this via url parameters or headers, depending on how the api works. These are both pretty easy to do with axios basic auth.

Get Cors Policy error in Place Autocomplete Address api by google

Getting Error in api of auto complete place address by google.I apply this api in reactjs
you are facing CORS which is pretty common in any API call on the web there are so many great explanations from others, here is one from StackOverflow:
https://stackoverflow.com/a/10636765/7232312
And this is another one on MDN:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

instagram oauth issue (make sure your redirect_uri is identical to the one you used in the OAuth dialog request)

Im trying to get basic data from instagram profiles, I am using a local webpack dev server to run my react app, I am also using Firebase functions, the function on firebase sends oauth/authorize request to instagarm's api, im getting a code response back and return it to my react popup, i then send the code to instagrams api for oatuh/access_token but im getting the following error:
Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
Im running localhost:3000 as https with an ssl, i've set the redirecturl in the instagram developer tools to https://localhost:3000/instagram-popup/
the popup is the page I'm, loading to get the access token, it does get the code from the firebase function correctly, but fails the last call... I have lost SO many hours on this issue, if anyone has been in this situation and solved it, or didnt even encounter it but knows what i can do to fix it, i would really appreciate any guidance here

npm sync-request: NetworkError: Failed to execute 'send' on 'XMLHttpRequest'

I'm studying about ReactJS and during my research I got stuck in middle of this untraceable issue. The idea is to present information on browser screen fetched from Database. I've chosen WebAPI to serve as a channel for communicating with database. The API implementation is working as expected, I tested it using Postman.
But I'm encountering the subjected error when I try to access API through Reducer (React-Redux implementation), please refer below screenshot.
It seems to me a CORS (Cross-Origin Resource Sharing) issue, as both API & ReactJS app running on localhost using different ports, but I'm not sure. In either case, please help me get to the solution.

Force.com callout: Is there a way to get the full response from the target server

When calling a web service from Force.com, I am getting:
System.CalloutException: Web service callout failed: Unexpected
element. Parser was expecting element
'http://schemas.xmlsoap.org/soap/envelope/:Envelope' but found ':HTML'
The network guys at the other end has asked to see the full response that Salesforce is getting from their server.
Is there a way to achieve that? I have tried running with debug level 'Finest' from execute anonymous, but that yields the same little message with no further detail.
The message you are getting is because an error is generated as Saleforce is trying to parse the response is and it isn't logged unfortunately.
The parsing error is happening because instead of a SOAP message response you are getting an HTML page. This usually happens when you are accessing a service that is protected behind a firewall. Which means you may be able to see the service when browsing on your computer but remember that Salesforce is outside of your firewall and thus any communication by Salesforce to your service will be blocked.
Couple of ways to address this but this wiki topic from Salesforce best covers the options:
http://www.salesforce.com/us/developer/docs/api/Content/sforce_api_om_outboundmessaging_security.htm
The above is specific to outbound messaging but essentially the technology issues are the same.
Don't forget that Apex includes an HttpRequest Class that works as a lower layer than the SOAP APIs. You should be able to write up a test method that sends a hard-coded XML request to the server and dumps the HttpResponse so you can see it.
Adding my own best answer, based on some internet research:
You can use an external tool like Runscope as a webservice proxy to automatically forward requests and pass through responses and view the XML SOAP messages. This is not a native solution on SFDC but it does do the job.
https://www.runscope.com/
The issue is that Force.com is trying to parse a SOAP response that's actually just HTML. This happens sometimes when an error occurred server-side and the response is meant for a browser to display, rather than sending back an exception report via a properly formatted SOAP response.
If they can't figure out why they are not sending back a consumable SOAP response, then you can try using other tools (outside of Force.com) to make the same webservice call from your browser and then see what the HTML actually says on return.

Resources