Getting a redirect issue on Safari browser only when trying to load an AppEngine site with Identity-aware proxy enabled. It shows requests being redirected to https://accounts.google.com/o/oauth2/v2/auth but then failing.
Origin is not allowed by Access-Control-Allow-Origin
If I load the url manually in a new tab in Safari I get: AppEngine error code 9.
I'm thinking it's probably to do with Safari's stricter cookie rules, somehow the IAP session cookie is being ignored because it's from another domain?
Safari seems to have stricter CORS rules, which may require additional rules. Especially if using AppEngine IAP.
If using <img>, <video>, <link> and <script> tags, and loading content from other domains using CORS. You need the crossorigin="use-credentials" attribute to allow the cookie sharing:
<script src="https://example.com/script.js" crossorigin="use-credentials"></script>
https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
Note: this is less secure.
Angular has a build command which will add the attributes automatically for you:
ng build --prod --crossOrigin=use-credentials
https://angular.io/cli/build#options
Related
In my React app I am making a simple fetch request:
useEffect(() => {
fetch('http://localhost:3000/').then((response) => console.log('foobar', response));
}, []);
This works fine. But when I try this with my real url like https://my-site.com/abc/token it doesn't work? When I try to fetch a different domain it doesn't work?
What could be the issue and how do I solve this?
Not many details in the post but I'll give it a go.
If you are receiving an error whilst in development similar to the one pictured below, then it means the server you are trying to contact does not allow the host you are developing on. This can be fixed either by either changing the security settings of your browser or installing a plugin that disables CORS.
However, if you are receiving this error in a non-local environment, then it means you should add the hostname of your frontend into the Access-Control-Allow-Origin on the serverside (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin).
Links for more details
Disable CORS in Chrome + Safari and the plugin for Firefox - https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa
Plugin for Chrome - Why does my http://localhost CORS origin not work?
I am running into a CORS issue when trying to have my React app send post requests to an api endpoint while using localhost:3000.
How do I configure my app to use custom.domain.dev instead of localhost:3000?
I have /etc/hosts setup to to include 127.0.0.1 custom.domain.dev as well as my .env file to include HOST=custom.domain.dev.
As noted in this stackoverflow question,
Chrome does not support localhost for CORS requests (a bug opened in 2010, marked WontFix in 2014).
I think there are two parts of the question -
Regarding the CORS flag on local host
CORS flag is raised by the Browser when there is a request from a domain/port to an entire new domain/port. If you are doing this for testing, you can disable this security flag in chrome by adding the --disable-web-security flag. Just create a shortcut of chrome to desktop > Right click > Properties >In shortcut tab - Target > Append --disable-web-security --user-data-dir="C:\tmpChromeSession" to target. This will disable the CORS check.
In real cases, if you have access/control on the api server, what you should be doing is to enable CORS on server by adding necessary response headers (Access-Control-Allow-Origin) to the response. If you do not have access, one option will be to route the request through a CORS proxy.
Change port
You can change the running port of the react app on the package.json See this Stack Overflow answer. If you run the app on your machine, you are stuck with localhost.
I'm doing application with spring security and Spring MVC in back end and Angular in front end.
My problem is that I do the logged in correctly, but the problem in logged out I implemented correctly in my localhost: http://localhost:8080 worked without problem. When I change it to https:// I get this error:
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
I want to know how to correct that? And how to know which url blocked by https in the browser for example chrome?
This post which gives a solution to your problem: http://www.learningthegoodstuff.com/2015/08/mixed-http-error-with-spring-security.html
All the details are explained there, basically all you have to do is add this two lines to my application.properties file:
server.tomcat.remote_ip_header=x-forwarded-for
server.tomcat.protocol_header=x-forwarded-proto
I fixed by removing a forward slash from the end of a URL fixing everything.this is help me : GET request throws error after app implemented SSL: Mixed Content: This request has been blocked; the content must be served over HTTPS"
This happens when the server is using http (non secured). You can fix it by enforcing https for all resources in the backend. Check here for more details.
In #Jabir Minjibir's answer there is very good link to describe the error. As sum up, when your application works with httpS scheme you can't make visits to unsecure links which is http.
I got this error and fixed it like I wrote below:
Mixed Content: The page at 'https://stackblitz.com/' was loaded over HTTPS, but
requested an insecure XMLHttpRequest endpoint 'http://172.19.0.62:920/'.
This request has been blocked; the content must be served over HTTPS.
You can mask unsecure links with simple-https-proxy npm package. In my experience I was coding an angular sample on httpS://stackblitz.com and I was trying to connect to an Elasticsearch server which doesn't have a domain name. I needed to make it working with ssl but I couldn't modify it's scheme. Thus I installed a proxy which can work secure (httpS).
I installed the npm package:
npm i -g simple-https-proxy#latest
Then I created certificate:
simple-https-proxy --makeCerts=true
Then I ran it
simple-https-proxy --target=http://172.19.0.62:9200 --port=9201 --rewriteBodyUrls=false
In another example:
Im using Bootstrap and AngularFire for my Web project. Everything ok but when I host it on Firebase.com. The layout has changed
Errors:
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'https://......firebaseapp.com/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
What happens with Bootstrap? Thanks in advance!
Firebase uses HTTPS to serve content. As you can see from the error, you are referring the content to be loaded over HTTP. Though this should not be happening, but it could be one of recent features of Chrome where they block, non-secure requests over a secure channel.
In order to solve it, you should change the URLs in your code to point at HTTPS versions of Bootstrap CDN.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Further Read: https://support.google.com/chrome/answer/1342714?hl=en
I was having the same issue:
you just need to make the http to https
in the bootstrap link inside the code.
That will resolve the issue.
How can I configure an Amazon S3 static webpage to properly route Angular ui.router html5Mode routes? On page refresh, it will make a request for a file that doesn't exist, and angular can't handle it. In the docs, they recommend changing your URL rewrites on the server.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
However, S3 is storage, and doesn't offer the same redirection options
I have been trying to use the built in redirection rules such as
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>[[ your application's domain name ]]</HostName>
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
However, this just leads to a redirect loop.
Any suggestions?
In the Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode you need to use #!/ (hashbang).
You could change this:
<ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
with
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
More details on this answer: https://stackoverflow.com/a/16877231/1733117
You may also need to configure your app for using that prefix:
angular.module(...)
...
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
Make sure you have the index route configured for your website. Mostly it is index.html
Remove routing rules from S3 configurations
Put a Cloudfront in front of your S3 bucket.
Configure error page rules for your Cloudfront instance.
In the error rules specify:
Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200
Basically there are 3 options, use an EC2 instance to perform the actual server rewrites to the configured HTML5 routes, or, like dnozay suggested, use the fallback mode and re-write requests to use the #! hashbang. Finally, you could just use the standard angular routes, which is the option I went with. Less hassle, and when Angular 2.0 rolls around, you can update to that.
https://stackoverflow.com/a/16877231/1733117
Doesn't really address the routing issue here.
here is another option using nginx proxy_pass, it also allows you to have multiple projects in subfolders and use subdomains
S3 Static Website Hosting Route All Paths to Index.html