Can someone tell me how to set CORS filter on XS advanced server. Currently all request calls from client application(angular) are rejected with message:
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:4200' is therefore not allowed
access. The response had HTTP status code 403.
XSA don't have .xsaccess file like XS server. By default XSA should accept all CORS requests but this is not the case.
I suppose that your client is angular app and you have some other "backend" app deployed on XSA.
First of all, your "backend" app (java, nodejs,...) should be part of multi target application. When you build this app, you will get .mtar (mulri target archive) which then should be deployed to XSA.
Also you need to create one more module as part of MTA. The module/app type should be html5 type, and commont practice is to call it web
web module acts as an application router and there is a file xs-app.json where you can specify route rules and also cors settings. It is a useful feature because you can manage the securty in that way.
Related
I was able to render Text contents from Magnolia public REST API on Salesforce community.
ISSUE: Image files are being blocked by CSP (Content Security Policy)
TRIED: Added the Base URL a few different ways to in Site URL in CSP Trusted Sites
https://*.magnolia-cms.com
https://*.demopublic.magnolia-cms.com
https://demopublic.magnolia-cms.com
Also, included https://demopublic.magnolia-cms.com url in Trusted Sites for Script
What I am missing here?
That looks like a typical case of forgetting setting the CORS headers on Magnolia site, hence browser blocking the request as required by the spec:
For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers.
More details here
If you haven't done so before, you can add simple static CORS definition in headers using AddHeadersFilter. It was discussed previously eg here
I have react app what I already deployed to the GitHub Pages.
But now I have a problem: what I am requesting auth status to server and didn`t get any response. What is the problem?
I have this error in console about my requests
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
GitHub pages supports CORS since 2015, so you can follow "Fix CORS Error| React Tutorial" which points to:
"Run Chrome browser without CORS" (not recommended, just for testing)
axios/axios issue 853
That last issue mentions:
cURL does not enforce CORS rules. Those rules are enforced by browsers for security purposes.
When you mention that you added the relevant header, I assume you mean you added those headers to the request.
Actually, the header is expected in the response headers from the server, indicating that the resource is allowed to be accessed by other websites directly.
FYI, CORS - Cross Origin Resource Sharing. Since your API does not support it, you have two options -
Use a proxy server on the same domain as your webpage to access 4chan's API or,
Use a proxy server on any other domain, but modify the response to include the necessary headers.
I deployed a weather app created with create-react-app. In development I would use the chrome extension allow access control origin. Now that it is deployed with github pages, I'm getting the error:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://boka44.github.io' is therefore not allowed
access. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
It seems like I need to add a header to my server, but I'm confused as to how and where to add it.
My code is here: https://github.com/Boka44/weather
Any help would be deeply appreciated.
The API endpoint (The one that provides weather information) which you are calling has disabled CORS which means you can never make a client-facing call (i.e. through a browser) because the browser will block the call.
You have 2 options here:
If you can change the API endpoint: you can add a CORS header to allow origins from your client app's domain.
If you cannot change the server code: Create your own API endpoint that calls the original API endpoint and have your client app call your own API. (i.e. You just make a proxy server that directs your calls to the original API endpoint). In this case, you can specify a CORS header on your server to allow calls from your client app domain only.
Dark Sky API docs says that it is not allowing CORS. So you can't get data to your client side code from their server. So create a proxy server in PHP or some other platforms, which will make an api call and produces the JSON formatted response.
I followed the instructions found in the readme in the stormapth-sdk-react github respository to set up a basic login form. The form displays, but I am immediately greeted by errors in the console:
XMLHttpRequest cannot load https://{redacted}.apps.stormpath.io/me. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.
I get an identical error for the login endpoint.
The Client API Guide indicates that client endpoints have to be configured to allow traffic from a particular domain, but does not provide any instructions for how to do this:
Applications that use the Client API have two relevant configuration parameters, both found on your Application’s page in the Stormpath Admin Console:...
Authorized Callback URIs: This list should include any URIs that your users will be returned to after they have completed authentication with an outside provider, for example as a part of the social login flow. For example, if you do not specify a redirect URI when you kick off the social login flow, the user will be redirected the first URI in this list.
Authorized Origin URIs: This list should include the application’s URL, or whatever URL will be included in the Origin header of requests sent to the Client API.
What do I need to do to get this working?
To fix this, you can login to https://api.stormpath.com, navigate to Applications > My Application, and modify the Authorized Origin URIs to include http://localhost:3000.
Stormpath seems to use a pretty similar setup to many API services. Like the directions say, go to your Stormpath Admin Console, and put your hostname (http://localhost:3000) in the relevant fields for both 1. and 2.
Doing so tells the Stormpath API to allow data to be sent to your application.
The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.
As the server you are using (for react) differs from the server you are requesting data(node or something else). (even the subdomain or port matters)
index.js: (server)
const cors = require('cors');
..
..
app.use(cors());
for more info about using cors: npm cors
I have very simple Angular app that runs with Gulp on http://localhost:3000/
and microservices developed by lagom runs on http://localhost:9000.
Lagom is Framework built over Akka and PlayFramework with build.sbt
now when I want to fetch a list form microservice I face:
XMLHttpRequest cannot load http://localhost:9000/api/users/list.
No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Where should I enable CORS? on the angular or Lagom? should it be defined on build.sbt?
This article should answer the question and all the following questions.
In short: your server should serve a special header e.g. Access-Control-Allow-Origin: * that allows cross domain requests.
This should be enough for the standard GET requests, however when you would like to add some request headers e.g. Authorization or use anything else but GET, the server should also answer to the so called preflight OPTIONS requests with the same header.
After all these conditions are fulfilled you can go on using your service.