I have a small Django project running on a ubuntu server with NGINX and gunicorn.
Everything works great when users visit www.example.com, However, when a user visits example.com instead of www.example.com, this is where it falls apart. I am using some javascript with the fetch command, to get data from my API (Django REST) and it returns:
Access to fetch at 'https://www.example.com/builds/apidata/4'
from origin 'https://example.com' has been blocked by CORS
policy: 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.
The easiest solution I have found is to just remove example.com from my ALLOWED_HOSTS in my settings.py file, but then when users forget www. they will be greeted with a 404 error.
The CORS error message also states I can change the request mode, but I don't know the security implications of this..
I also tried to use redirection on my domain settings from example.com to www.example.com, but this doesn't seem work either.
Any suggestions would be appreciated!
Although you could certainly use CORS to allow this cross-domain usage, a simpler and cleaner solution is to just allow one root domain—either with www or not.
Setting PREPEND_WWW to True is a simple way to ensure that requests consistently use the www version, as it causes CommonMiddleware to issue redirects when the non-www version is used.
In your webserver configuration, you can add an Access-Control-Allow-Origin header on your www subdomain, which would allow requests from your root domain.
This would work: Access-Control-Allow-Origin: https://example.com
Related
Let's say I have a website "webapp.abc.com" and my backend is hosted on "api.abc.com"
Now whenever my Frontend (webapp.abc.com) calls an API of (api.abc.com) then I get some CSP headers in the response
Now my question is I am getting these CSP headers from a different sub domain (api.abc.com) than my Frontend (webapp.abc.com), so what will happen...will the browser apply this CSP header that i got from the response of "api.abc.com" or is it necessary to have our Frontend and Backend sub domain be the same to have the effects of these headers on my website
CSP is a policy for content, which typically has content type "text/html" and is rendered in your browser. An API typically serves data and a CSP doesn't really make any difference. There are however situations in which it can be useful, see https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html#security-headers
In this case you will instead need to configure your Cross Origin Resource Sharing (CORS) headers. You will need to set at least Access-Control-Allow-Origin. You should not set it to * or just reflect the origin of the request if the data isn't public. You might also need to set other CORS headers such as Access-Control-Allow-Credentials if authentication is required. Please try to understand CORS headers before implementing as they are relaxing the security defaults browsers are applying for your data's safety.
I am trying to build a little website where i need to use Docxtemplater. (https://docxtemplater.com/)
This is a node module used to edit word documents (.docx). In the docs (https://docxtemplater.com/docs/generate/), it is stated "Please note that if you want to load a docx from your filesystem, you will need a webserver or you will be blocked by CORS policy."
I have tried uploading my website to a host (https://www.000webhost.com/), but i get the error:
mathiastester.000webhostapp.com/:1 Access to XMLHttpRequest at 'https://docxtemplater.com/tag-example.docx' from origin 'https://mathiastester.000webhostapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Does anyone have any clue on what is going on...?
Here is the website: https://mathiastester.000webhostapp.com/
Just like the example in the link you provided, your AJAX code needs to make a request to some server-side code running on your webserver, which then sends the request to docxtemplater, because docxtemplater doesn't allow cross-origin ("CORS") requests to it.
Simply put, a CORS request is an AJAX request where the request is sent to a different "origin" (combination of domain, port and protocol) than the one it is running from. These are disallowed by browsers by default for security reasons, but the remote server can, if it wishes, return response headers indicating to the browser that the request can in fact be allowed. docxtemplater doesn't do that, and the documentation you quoted is telling you not to make a CORS request to their servers. However judging by the error message you've shown us, you've done exactly that in your code.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more info on what CORS is.
I'm trying to make an ajax get call between the two following sub domains:
Target URL: https://qa.mydomain.com
Origin URL: https://myotherqa.mydomain.com
I'm receiving the following error:
XMLHttpRequest cannot load https://qa.mydomain.com/suggest?
q=foo. No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://myotherqa.mydomain.com' is therefore not allowed
access.
I'm using $.get() to make the ajax call
Both the websites are under the same sub domain and both 'https'.
What am I missing?
Thanks
Issue is related to web security aka Same origin policy.
Under the policy, a web browser permits scripts contained in a first
web page to access data in a second web page, but only if both web
pages have the same origin. An origin is defined as a combination of
URI scheme, hostname, and port number. - More info here.
The proper solution to handle this is to allow CORS on your server side.
An alternative solution is using JSONP for get requests.
You can find some common settings and more information at this site:
http://enable-cors.org/
The problem is with the server configuration the server is not accepting request from other domains for security concerns. Ports maybe different, enable the cors at the server level configuration. This will solve the issue.
guys!
I'm having some trouble with javascript in Ionic. I'm trying to make a request to another site, and I'm having this error message:
XMLHttpRequest cannot load https://svcs.sandbox.paypal.com/AdaptivePayments/Pay. 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.
My Ionic App have already the plugin whitelist installed and up to date, my config.xml file allow navigation and access of every location. I've tried also to execute chrome with security disabled and it didn't work either.
Could anyone help? Don't know what else to do.
By default, XMLHttpRequests are limited to same domain requests (i.e. request between localhost and localhost or request between paypal.com and paypal.com).
Cross-site XMLHttpRequests (like from localhost to paypal.com) are disabled by default as a security feature in modern browsers, in order to bypass this security feature, the destination server should explicitly allow cross-site requests and this is done by sending back a header called "Access-Control-Allow-Origin" with either * or specific domain as value, for example when a server replies back with the following header:
Access-Control-Allow-Origin: *
It is telling the browser of visitor that I'm accepting an XMLHttpRequest from any domain.
In your case, you are doing a request on https://svcs.sandbox.paypal.com/AdaptivePayments/Pay which doesn't allow cross-site requests (no Access-Control-Allow-Origin is present) and thus the browser is blocking XMLHttpRequest from going through.
You cannot test your http://localhost:8100 (LOCALHOST) to paypal services/api's that requires communication with your script, except if you use tunnel hosts, like https://ngrok.com/, https://localtunnel.me/. Your scripts that run in your localhost should be accessible to the world wide web, so that it is visible to Paypal.
Hi I've been working on an angularjs app on plnkr, and I'm pulling data from a remote server to the app. Initially I had problems accessing the xml file because of the CORS issue, the cross-domain restriction, but I enabled CORS. The app now works on plnkr, but when I try to run it on the browser, the console gives me the same error, except with an additional note at the end.
The error:
`XMLHttpRequest cannot load http://50.22.49.237:8084/XMLFiles/ReformatedSample.xml. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.`
The "the reponse had HTTP status code 403" bit seems to be new. What's going on? Why does it work on plnkr and not in browser? What do I need to do to fix it? Any help is appreciated.
Edit: The problem was with my browser - Google Chrome has a web security feature that doesn't allow me to open the app unless I disable it. I tested it in the disabled version of the browser and it works, but now I can't host these files on my website because the users won't be able to see the app if their web security is enabled. How do I work around this?
This is a security measure assured by your web browser, you can read about it here
you can work this around by adding this command to the .htaccess file in the service route directory:
<FilesMatch "\.(php)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Alternatively, you can add this to your HTTP response header.