CORS related errors when getting Channel API client script - google-app-engine

I'm currently experimenting with a Google App Engine/Go + Polymer.dart website at http://xclamm.appspot.com/.
The problem is that I get the following error when I access http://xclamm.appspot.com/ with Dartium (31.0.1612.0 Developer Build 219647).
XMLHttpRequest cannot load https://talkgadget.google.com/talkgadget/channel.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xclamm.appspot.com' is therefore not allowed access.
I did some research and found that the problem is related with how I refer to /_ah/channel/jsapi, but I can't find how to fix it. I tried the following ways to refer to channel.js, but I still get the same error.
<!-- Following doesn't work -->
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<!-- Following doesn't work either -->
<script type="text/javascript" src="https://talkgadget.google.com/talkgadget/channel.js"></script>
If I run the website on dev_appserver.py, it seems to be working OK. Am I missing something?
The source code is available at https://github.com/rillomas/xclamm-gae, and I'm using Google App Engine SDK 1.8.4 for Go (x64 Windows).

I moved the <script type="text/javascript" src="/_ah/channel/jsapi"></script> tag from main-stage.html (html for an internal web component) to index.html (root html for the website), and the CORS error went away.
The <script> tag was originally placed inside a <polymer-element> tag, and was (probably) translated to an XMLHttpRequest by Polymer.dart, causing the error.

Related

GitHub pages custom domain 404

So basically, I bought the custom domain of nexus-cheats.com, and went to connect it to my GitHub pages website of archiemourad.github.io/Nexus (/Nexus is the homepage). I entered the custom domain and set up the DNS, did the DNS checks and everything seemed to be working (Image Below) (My website is using React.js) Now, when loading the domain nexus-cheats.com It brings me to a blank page, And it "seems" to be working in a way It loads the tab title but nothing else. In the console there are a bunch of cookie related warnings. But no errors. When I go to nexus-cheats.com/Nexus i get the default GitHub pages 404. And get two errors. One is the denail of loading of my favicon.ico (Tab logo) Error => Content Security Policy: The page’s settings blocked the loading of a resource at https://nexus-cheats.com/favicon.ico (“img-src”). The other is a server GET 404 error => GEThttps://nexus-cheats.com/NexusALTHOUGH after loading nexus-cheats.com/Nexus and going back to nexus-cheats.com I get two more errors, both being the failure to load certain files in my react app. Errors => GET https://nexus-cheats.com/Nexus/static/js/main.89be2f5c.js GET https://nexus-cheats.com/Nexus/static/css/main.1bf437ff.css These (I assume) Are the build version my GitHub pages website is running on. Anyone know a solution? Or the problem going on here?
DNS CONFIG: My A: Record is set to 185.199.108.153 My CNAME: Record is pointing to archiemourad.github.io. (www)
----edit: Solved, but I kept all of my original text for brevity---
I'm getting this same exact error and situation right now.
I don't have answers yet, but it looks like React is trying to connect the %PUBLICURL% to the wrong place now. This comes from my /public/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
...
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I subtracted irrelevant code and added the ...'s, for the record.
Locally, my network tab in my browser's developer tools shows:
http://localhost:3000/{project-name}/manifest.json
But, when I hosted it the exact way you have (with it working properly before I added the custom domain), it returns:
{my-custom-domain}/{project-name}/manifest.json
The /public/index.html file has loaded, but it can't access the other files it calls correctly.
It seems that the index.html is adding an extra part to the address from the %PUBLICURL%. By that, I mean the %PUBLICURL% adds the {project-name} between the custom domain and the files it is trying to access. My url should read:
{my-custom-domain}/manifest.json
I can edit the values in the developer's tools to remove that part, and then the files will load. But, this still doesn't solve the issue.
---------edit: solved the issue---------
I am unsure if the above changes are necessary, but I did remove the %PUBLICURL% from my /public/index.html file.
Now for the good part - the fix!
In your package.json, be sure to change the:
"homepage": "your-github-url"
to:
"homepage": "your-fancy-new-custom-domain"
Save it up and then run your build script included in most of the resources I found ( like this: https://create-react-app.dev/docs/deployment/#step-2-install-gh-pages-and-add-deploy-to-scripts-in-packagejson ):
npm run deploy
This will update your project, post it to your GitHub, and deploy it. Then just check that you have the same settings as you originally posted an image of on your GitHub pages, and it should work!

Not able to access smartedit url https://localhost:9002/smartedit

I followed the steps provided in the wiki to install smartedit.
After installation of the same.. I tried to access the smartedit url https://localhost:9002/smartedit. But it is throwing 404 page and the following exception:
error expected mime type application octet stream but got text
<html>
<head>
<meta http equiv="Content Type" content="text/html;charset=utf 8"/>
<title>Error 404 Not Found</title>
</head>
<body>HTTP ERROR 404
<p>Problem accessing /solr/master_backoffice_backoffice_product_flip/update. Reason:Not Found
</body>
</html>
We were using 6.3 earlier where we did not use smartedit. Now we are upgrading to 1811 and are trying to have smartedit functionality. Any leads would be appreciated.
Thanks.
To make sure, you have properly installed this extension, you have to head up to hAC->Platform->Extensions and check if you can see smartedit on the list (see the uploaded screnshot). If there's no sign of smartedit, you have failed to install it properly.
screenshot

CORS issues when adding atatus to ionic project

I am trying to add Atatus to my Ionic project. I followed the documentation to include the scripts.
FIRST TRY
So my index.html includes the scripts like this:
<script src="https://dmc1acwvwny3.cloudfront.net/atatus.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>
In the documentation they mention CORS issues and how to solve them. The header is something I can't set if I am correct, this header should be set on the cloudfront server. So I have added the crossorigin attribute in the script tag, but still I receive the CORS error when running the project locally with ionic serve:
Script from origin 'https://dmc1acwvwny3.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.178.59:8100' is therefore not allowed access.
SECOND TRY
Then I tried to solve the CORS issues with adding proxies in the ionic.project file according to this blog post from Ionic. So my ionic.project file contains:
{
"name": "my-amazing-app",
"app_id": "345gfsd3trf",
"gulpStartupTasks": [
"build:env",
"build:index",
"build:sass",
"build:template",
"build:js",
"concat:index",
"watch"
],
"proxies": [
{
"path": "/atatus.js",
"proxyUrl": "https://dmc1acwvwny3.cloudfront.net/atatus.js"
}
]
}
So I changed the index.html to use this proxy:
<script src="http://localhost:8100/atatus.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>
When I start serving with ionic serve the output looks promising:
me#my-laptop:~/Documents/Projects/my-amazing-app$ ionic serve
Gulp startup tasks: [ 'build:env',
'build:index',
'build:sass',
'build:template',
'build:js',
'concat:index',
'watch' ]
Running live reload server: http://192.168.178.59:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Proxy added: /atatus.js => https://dmc1acwvwny3.cloudfront.net/atatus.js
Running dev server: http://192.168.178.59:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit
But unfortunally I receive a connection refused in the console: GET http://localhost:8100/atatus.js net::ERR_CONNECTION_REFUSED.
THIRD TRY
I thought maybe this is because of the use of localhost instead of my internal IP 192.168.178.59. So I changed all use of localhost to 192.168.178.59, but then I get a 403 Forbidden.
FOURTH TRY
The last test I did was adding atatus library locally through bower:
bower install atatus-js
Also changed the index.html accordingly:
<script src="lib/atatus-js/atatus.min.js" crossorigin="anonymous" type="application/javascript" />
<script type="text/javascript"> atatus.config('MY_API_KEY').install(); </script>
Now I receive no errors when loading the library, but when I trough an notify to atatus manually through the console: atatus.notify(new Error('Test Atatus Setup')); I receive the following errors from atatus.min.js:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
XMLHttpRequest cannot load http://192.168.178.59:3001/socket.io/socket.io.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.178.59:8100' is therefore not allowed access.
Uncaught TypeError: Cannot read property 'test' of undefined(…)
Which I don't understand. Why is it complaining about http://192.168.178.59:3001/socket.io/socket.io.js. This is my local running socket.io server, which runs correctly and has CORS configured. Without atatus added the whole project runs perfectly with these sockets.
FIFTH TRY
I have deployed the project with the fourth try to a DigitalOcean server. So the atatus library is loaded locally (bower). No CORS issues arise, but I receive the following error when adding a notify in the console:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
Uncaught TypeError: Cannot read property 'test' of undefined(…)
SOLUTION
I had to change 2 settings, being:
Set the next: $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {options.async = true;});
Add https://*.atatus.com to the default-src of the Content-Security-Policy meta header.
Thanks to #MarkVeenstra
Since Cordova 5.x, you need to specify the Content-Security-Policy meta header. In this header in the default-src, you have to add https://*.atatus.com. Then all works.

Issue reading from my Slim PHP API through Angularjs using ngResource

I've recently completed a Slip PHP API build which interacts beautifully with my Android application. I'm now building a web front-end and for the life of me I can't understand how to request information via GET using ngResource's query function.
My index.html file is:
<!doctype html>
<html ng-app="discussApp">
<head>
</head>
<body>
<div ng-controller="topicsController">
<div>{{ topics }}</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js file:
var app = angular.module('discussApp', ['ngResource']);
app.controller("topicsController", function($scope, $resource, $http) {
var Topics = $resource("http://api.discussorama.com/v1/topics");
$scope.topics = Topics.query();
});
And the information I'm trying to read (I've successfully done this both from Chrome's Advanced REST Client, the browser, and my Android app) is at http://api.discussorama.com/v1/topics (Note: I've temporarily disabled my authentication middleware in Slim PHP to test with Angularjs). The endpoint returns a json response but I'm not seeing anything in Angular besides "[]". The link to the Angular app is http://hwaelapps.com/discuss/web if anyone would like to see exactly what is happening. Thanks in advance for the help. Note: I've tried several ngResource config options including urlencode but it's still not receiving the data so I stripped all that and all the code is directly as is in the question.
The answer was in the console log all along. The error I was receiving was:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The solution was simply to add
header("Access-Control-Allow-Origin: *");
to my Slim API's index.php file. I guess my shared host isn't configured for CORS.

Getting message "This page has insecure content" while accessing drupal site using HTTPS://?

I have developed Drupal site . But when I access my site using HTTPS:// browser gives me a message "This page has insecure content" . I have putted my site data on secure site .
I load JS file in that page for some purpose.
So,Is it JS file issue?
I don't think it should be JS or CSS issue, unless you include them using absolute URLs:
For example if you add the following lines in your theme's template file:
<link rel="stylesheet" type="text/css" href="http://yoursite/mystyle.css">
<script src="http://yoursite/myScript.js"></script>
This serves the JavaScript through http instead of https. Instead you should use:
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myScript.js"></script>
notice that the URLs in the second piece of code contains relative URL, and would serve the files with the same protocol with which the site is accessed via a browser.
If this is not the case, you have to scan through all the links on the page, and find the links which are start with the format http://... instead of https://.... This problem arises when a browser finds that not all content of the page is being served using encryption.
Hope that makes sense. Please feel free to ask further queries.
Indeed, you might have some assets (css or javascript) loaded from "non secure" source (using http protocol instead of https).

Resources