Error Ionic to access APIs - api

I tryed to access an API from Ionic, but I receive the error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.
I've already tried using JSONP (with callback).

Related

Shopify Graphql code returning Error 404. Also noticed that it works on .myshopify domain but not on custom

I do have a question regarding Graphql, i made it work but when we changed our domain from ".myshopify" to "custom" domain, it stopped working, it returns a error 400.
Here's the complete error.
OPTIONS https://testwebsite.myshopify.com/admin/api/graphql.json 400
Access to XMLHttpRequest at 'https://testwebsite.myshopify.com/admin/api/graphql.json' from origin 'https://testwebsite.com.au' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Hope you can give me an answer.
Thank you

Implementing Okta in React Native and get: Response to preflight request doesn't pass access

I'm implementing the Okta signin widget with React Native
I get this:
Failed to load https://dev-827074.oktapreview.com/api/v1/sessions/me: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
After trying to login, I get the following:
UnsupportedBrowserError {name: "UNSUPPORTED_BROWSER_ERROR", message: "There was an error sending the request - have you enabled CORS?"}
We've received similar errors from Okta. What we had to do is add the hostname for the server that hosts the webview as a Trusted Origin.
API -> Trusted Origins -> Add Origin
You can add multiple origins, you probably need to add http://localhost:3000.
You may need to add http://localhost:3000/implicit/callback to your app's Login Redirect URI's in the General Settings of your Okta app
The API you have written does not support CORS. CORS or Cross origin resource sharing allows a web app to submit requests to an API belonging to a different domain. This setting should be enabled on the API side.
This is how it works, whenever a request is sent to a different domain, an OPTIONS method is sent to the server. The server responds back with available options for the web app. If the verb is supported, the browser will send the actual request with the appropriate verb or method (For example, GET or POST). If the verb is not supported, you get the above error message.
In short, enable CORS for your API. If it is a Node / Express API it is just a simple cors package you need to add to your project and use.

What is the difference between a postman request and a request from heroku or localhost

I can make a request from postman but when I make the same exact request (I'm talking about even copying the code from postman) I get an error.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://glacial-stream-35306.herokuapp.com' is therefore not allowed access.
Even with the cors-eveywhere chrome extension and attempting to use jsonp I cannot get it to work. Even though the request goes through every time on postman.
What makes a postman req different from a request from a Heroku app?

Aurelia HttpClient with Authentication

I am trying to use the Aurelia HttpClient to call the TagniFi API on a different domain (and authenticating). The relevant code is:
return this._httpClient.createRequest(uri)
.asGet()
.withCredentials(true)
.withHeader('Access-Control-Allow-Origin', 'localhost:9000')
.withHeader('Authorization', 'Basic <my-key>')
.send();
I do receive a status 200 from the API, but I get the following error:
Response to preflight request doesn't pass access control check: A >wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header >when the credentials flag is true. Origin 'http://localhost:9000' is >therefore not allowed access. The credentials mode of an XMLHttpRequest >is controlled by the withCredentials attribute.
I am not sure if this is a error in the way I am making the call or a bug in Aurelia. Any help is appreciated. Thanks.
The Access-Control-Allow-Origin is an header sent in the response by the server and in your case you use it in the request from the client.
It's not a bug in Aurelia but a misuse of CORS.
See this excellent answer for more information on CORS.

Signing into Backand Using BackAnd SDK

Attempting to sign in (and enter a session) using user credentials in an Angular app using the Backand SDK. From the Backand docs I am attempting to sign in using the Backand.signin() method (from my local) which looks to be initially sending an OPTIONS http request to the API which unfortunately is causing this cross origin error:
XMLHttpRequest cannot load https://api.backand.com/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:xxxx' is therefore not allowed access. The response had HTTP status code 400.
The exact response from the endpoint is: {"error":"unsupported_grant_type"}
I've combed through the documentation extensively but can't find anyone else having these errors.
This is exact code I am using:
function Login(username, password, callback) {
Backand.signin(username, password).then(function(response){
console.log(response);
}, function(error){
console.log(error);
});
}
The error is logged to the console as a null object.
It looks like the error was in fact on my end.
While attempting to set up my own Authorization service in my Angular app I inadvertently was adding an encoded Authorization token header somehow. When the requests were being made to Backand from the Backand SDK, the headers were not correctly set and thus causing issues.