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.
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 have an AngularJs website and when I am trying to post data then when I am opening my website without using www then I am getting
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
Otherwise, I am not getting any error.
I tried to search and found that I should implement CORS on my backend which is in NodeJs but can anyone please tell me how can I only implement CORS Headers such that for both www and without, it would work but for any other domain trying to access my API must result in preflight error.
I am trying to do this because I read here which-security-risks-do-cors-imply that allowing all domains can increase security overhead for my website which I do not want.
Thanks.
I'm afraid this is not something you can tweak just in your client-side code. In order for cross-origin requests to work, you need to set an http response header: it's the server, who serves the resource, who will need the change, not the client side code from angularJs.
I believe that you should update your question stating what your server side language is and how are you handling http requests in the server side. As far as I know, just adding a header like:
Access-Control-Allow-Origin: http://client.domain.com
In your responses will do the trick. Where client.domain.com is the domain of your client, angularJs application.
when trying to $.ajax to fetch some content from other websites in my website, I got the error.
Failed to load https://www.pinterest.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I knew if the target website didn't allow localhost:8100 to fetch the data, I cannot fetch it in the client side on the web.
However, I found that mobile app (not mobile browser, but android/ios application) does not have the issue, they can simply get the website content by their default mobile built-in HTTP get function.
Do i want to ask why mobile will not encounter CORS issue (mobile can fetch the webcontent simply by the built-in http get function)?
thanks.
CORS is enforced by the browser to fulfill the security standard they have to meet. It does not affect requests made programmatically from any language, like a curl call on bash.
This is how CORS works, based on Wikipedia:
The browser sends the OPTIONS request with an Origin HTTP header. The value of this header is the domain that served the parent page. When a page from http://www.example.com attempts to access a user's data in service.example.com, the following request header would be sent to service.example.com: Origin: http://www.example.com.
The server at service.example.com may respond with:
An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example Access-Control-Allow-Origin: http://www.example.com
An error page if the server does not allow the cross-origin request
An Access-Control-Allow-Origin (ACAO) header with a wildcard that allows all domains: Access-Control-Allow-Origin: *
The way CORS works means it is optional. Browsers enforce it to prevent Javascript AJAX calls to perform malicious calls. But other types of consumers built by hand don't need to enforce CORS.
Think in this example:
You are the owner of somesite.com
Users authenticate to your site using the traditional cookie method
User logins into anothersite.com, built by an attacker. This site has the following code:
<script>fetch('http://somesite.com/posts/1', { method: 'DELETE' });</script>
... effectively performing a request to your site and doing bad things.
Happily, the browser will perform a preflight request when it sees a cross-domain request, and if your site does not respond saying that requests coming from anothersite.com are OK, you will be covered by default from a potential attack
This is why CORS only makes sense in the context of a browser. Javascript you send to the browser can not (at least easily) circumvent CORS because the only API that allows you to perform requests from the browser is written in stone. Additionally, there are no local storage or cookies outside of the browser.
Corolarium: Enforcing CORS is a deliberate action from the requester, or whoever is making the requests for you, not the sender. Javascript APIs in browsers enforce it. Other languages don't have the need for the reasons explained.
When running on a device, your files are served over the file:// protocol, not http://, and your origin will therefore not exist. That's why the request from the native device does not trigger CORS.
​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.