Cors configuration issues when using ServiceStacks JsonServiceClient - servicestack

I have issues when trying to Post data to my API using ServiceStack's JsonServiceClient.
I get the following error message in the console
Access to fetch at 'https://192.168.10.191:5001/json/reply/CreateEquipment' from origin 'http://192.168.10.191:5000' has been blocked by CORS policy: Request header field headers is not allowed by Access-Control-Allow-Headers in preflight response.
I have added 192.168.10.191:5000 to the Whitelist.
I can see in the network tab that it tries to access "https://192.168.10.191:5001/json/reply/CreateEquipment" but nothing is showing when I capture the traffic using fiddler.
I have attached an image of the headers. https://i.stack.imgur.com/hUfII.png

Your requesting a https resource at port 5001 but your origin white list returns a http resource on 5000, they need to match.

Related

Can someone explain the diction in the error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'..."?

I know this issue is all over stack overflow and there are a lot of solutions to it, but my questions is regarding the phrasing of the error itself and what certain parts mean. Here is the error:
Access to XMLHttpRequest at 'https://microsoft.com'
(redirected from 'https://apple.com')
from origin 'https://apple.com' 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.
Is this saying the Microsoft received or sent an XMLHttpRequest?
Is the originator of the XMLHttpRequest Apple?
I am very confused about what domain this error is stating that the XMLHttpRequest came from!
TL;DR
Is this saying the Microsoft received or sent an XMLHttpRequest?
Microsoft received the request.
Is the originator of the XMLHttpRequest Apple?
Yes.
More details
I'm assuming that the error message in your question is fictitious and that the URL and origins mentioned are there just as an example. You can read the error message as follows:
from origin 'https://apple.com' has been blocked by CORS policy
Understand: Some page on Web origin https://apple.com issued a cross-origin request that failed the CORS check.
Access to XMLHttpRequest at 'https://microsoft.com' (redirected from 'https://apple.com')
Understand: The request was issued to https://apple.com, which resulted in a cross-origin redirect to https://microsoft.com.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Understand: The cross-origin request to https://microsoft.com was such as to trigger a CORS check, but CORS preflight failed because https://microsoft.com isn't configured to allow Web origin https://apple.com.

Pimcore 10.3 version graphQL API in react UI I am getting CORS Error

When I am using Pimcore 10.3 version graphQL API in react UI
I am getting CORS
Access to fetch at 'http://xx.xx.xx.xx/pimcore-graphql-webservices/products' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
It is working on pimcore graphql platform and postman
I tried the same on pimcore demo cloud (https://demo.pimcore.fun/admin/login?perspective=) instance the same error is coming there also
Failed to load resource: the server responded with a status of 404 (Not Found)
pimgraphqldemo.html:1 Access to fetch at 'https://demo.pimcore.fun/pimcore-graphql-webservices/products' from origin 'http://127.0.0.1:5500' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
demo.pimcore.fun/pimcore-graphql-webservices/products:1 Failed to load resource: net::ERR_FAILED
Any fix for this?

DocusignApi integration with angular

I am looking for Integration of DocuSignApi with Angular. I am following these steps.
Angular Application
Backend Server using .net core Web API to handle and DocuSign api using nuget.
Can I achieve this?
Option 1 - Angular application - will hit - login method of middleware api application - middleware will communicate - docusign - after successful it will share details of logged in users.
Option 2 - Angular application - directly hit to docusign methods for this When I am doing like this
var url = "https://account-d.docusign.com/oauth/auth?response_type=token&scope=signature&client_id=XXXXXXXXXXXXXXX-01caXXXXXXXX&state=a39fh23hnf23&redirect_uri=http://localhost:81/";
return this._dataService.getThirdParty1(url, header)
.pipe(map((response: Response) => {
return response;
}));
- public getThirdParty(url) {
return this._httpClient.get( url).pipe().pipe(map(this.handleResponse)).pipe(catchError(this.handleError.bind(this)));
}
I am getting error
Access to XMLHttpRequest at 'https://account-d.docusign.com/oauth/auth?response_type=token&scope=signature&client_id=XXXXXXXXXXXXXXX-01ca8f1b220&state=a39fh23hnf23&redirect_uri=http://localhost:81/' from origin 'http://localhost:81' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
account-d.docusign.com/oauth/auth?response_type=token&scope=signature&client_id=XXXXXXXXXX-411a-9bb9-01ca8f1b220&state=a39fh23hnf23&redirect_uri=http://localhost:81/:1 Failed to load resource: net::ERR_FAILED
Please provide a way to check these options.
First, your issue is that you are making client-side calls to DocuSign from a different domain which validated CORS policy which is a security concern.
(Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading of resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.)
Larry wrote extensively on this topic and here are some of the resources that can help.
Here is a three part series on the topic - https://www.docusign.com/blog/dsdev-building-single-page-applications-with-docusign-and-cors-part-1
Here is his code in GitHub showing you how to create a CORS gateway - https://github.com/docusign/blog-create-a-CORS-gateway
One other useful resource - https://www.cdata.com/kb/tech/docusign-odata-angularjs.rst

How can I avoid Same Origin Policy exception when using AWS API Gateway and CloudFront

I have a SPA (fronted by CloundFront) which calls a GET endpoint which I have set up on APIGateway. Domain of the spa is different than the domain of API Gateway. Am getting Same Origin policy exceptions like below when I my SPA tries to do a GET on a resource
"No Access-Control-Allow-Origin header is present on requested resource"
Here is my setup on API Gateway. I have an Options resource which returns the following
Access-Control-Allow-Methods: 'GET, OPTIONS'
Access-Control-Allow-Headers: 'Content-Type,X-Api-Key,X-Requested-With'
Access-Control-Origin: '*'
I have a Get Resource, which in turn calls my backend service (proxies to my service). I have setup the resource to return these headers as part of the response
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin
Browser's Options call returns in a 200, with all the necessary Access Control Stuff. But when the browser makes the GET call, I get the same origin policy exception. Any ideas whats happening here? Is it because my GET response does not explicitly set a value for Access-Control-Origin?
Thanks
Kay
I have an Options resource which returns the following
The header you need is Access-Control-Allow-Origin: '*'.
But, yes, you do need to return it, because a simple GET doesn't do a pre-flight OPTIONS *.

How do I enable CORS on Azure Storage Blob

I am trying to customize the UI page on Azure B2C using an Azure storage blob using this article. It needs to be CORS enabled. I have tested it using test-cors.org and I know it is not but I do not know how to set it
Ther article uses https://wingtiptoysb2c.blob.core.windows.net/b2c/wingtip/selfasserted.html which I test and returns a 200 but mine does not
https://bookssorted.blob.core.windows.net/b2c/selfasserted.html
This article talks about using this PUT https://myaccount.blob.core.windows.net/?restype=service&comp=properties HTTP/1.1 but how do I run this?
EDIT: I am using Azure Storage Explorer and I have these rules set on the blob but it is still not returning a http 200 from test-cors.org
EDIT2: this is the url that makes the request to the authentication policy which loads the page that makes the request to load the blob
https://login.microsoftonline.com/bookssorted.onmicrosoft.com/oauth2/v2.0/authorize?p=B2C_1_bookssortedAuthenticationPolicy&client_Id=35f308cd-8914-4035-9f62-cec7600c1727&nonce=defaultNonce&redirect_uri=https%3A%2F%2Flocalhost%2Fbookssorted%2Fsecure%2Fsuccess&scope=openid&response_type=id_token&prompt=login
EDIT3: headers as requested
In order for a cross-origin request to succeed, the request must match the CORS configuration. This includes the request origin, request headers & exposed (response) headers. Any mismatch there would result in request to fail.
If the origin is known, then that URL must be specified (including protocol & port number if applicable) in the CORS rule. If the origin is not known and you can specify * as the origin and all URLs will be able to make such requests.
Same thing goes for request headers and exposed headers. Since different requests to Azure Storage make use of different request headers and return different response headers, it is advisable to set the value for these as * in the CORS rule. This will ensure that all request/response headers are accepted.

Resources