I´ve developed an Rails app which works fine when running on localhost.
However, when pushing it to Heroku I run into problems with my ajax calls, which can look something like this:
$.ajax({
type: "GET",
url: "/getTemplatesForCategory/"+categoryId,
dataType: 'json',
success: function(data){
this.setState({templates: data, suppliers: []});
}.bind(this)
});
This is routed like this in my routes.rb:
get 'getTemplatesForCategory/:categoryId', to: 'templates#getTemplatesForCategory'
When these run on the Herou-version the console gives me this error:
Mixed Content: The page at 'https://myappname.herokuapp.com/templates/8' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost:3000/getTemplatesForCategory/7'. This request has been blocked; the content must be served over HTTPS.
I´m using a Procfile which seems to work but I can't really figure out why the calls go to my localhost?
I discovered it was an completely different issue that caused this. Heroku did not pick up the changes to my javascript code so it was actually the old code make request to the localhost address.
Related
my server is working on the port :3000 and i am using node, express on server side and this is working fine while using curl or REST client.
ember cli server is working on port :4200
I added this code on environment.js for connecting server to client.
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' 'unsafe-inline' 'unsafe-eval'",
'font-src': "'self'",
'connect-src': "'self' http://localhost:3000",
'img-src': "'self'",
'report-uri':"'localhost'",
'style-src': "'self' 'unsafe-inline'",
'frame-src': "'none'"
}
and my application adapter code is:
import JSONAPIAdapter from 'ember-data/adapters/json-api';
export default JSONAPIAdapter.extend({
"host": "http://localhost:3000",
"namespace": "api"
});
running my ember server on this way
ember server --proxy http://127.0.0.1:3000
on controller i use ajax call :
$.ajax({
type: 'POST',
url: '/blog',
contentType: 'application/json',
data: param,
processData: false,
success :
});
it getting an error:
POST http://localhost:4200/blog 500 (Internal Server Error)
i have done all these but i don't know why it's not working.
please help me if you have any idea for that .
You need to understand the difference between two ways to connect to your API:
Proxy
You can use the --proxy option of ember-cli to proxy all requests made to your ember development server that are not handled by ember to your backend.
This is a good way to do this because from the view of your application and browser your backend and your application are on the same host.
If you do so you should not specify the host on your adapter or add your backend to your CSP configuration.
However you can do this only if in production you serve your ember application from your backend.
CORS
The other way to connect to your backend is to make your requests directly to another origin. However this will be CORS requests so they need additional configuration on your backend!
If you want to directly fetch data from a different origin, in browser land your server there needs to deliver additional HTTP headers (CORS Headers).
However you should do this only do this if you will not deliver your frontend from your backend server in production.
If you want to use CORS you should not specify the --proxy flag when you run ember serve, but specify the host and configure your CSP correctly.
I also mentioned that you missed a = in your ember serve call.
Its not ember server --proxy http://127.0.0.1:3000 but ember server --proxy=http://127.0.0.1:3000!
Generally if you do ember serve --proxy=http://127.0.0.1:3000 then a HTTP AJAX GET call to http://localhost:4200/blog should return the same as http://127.0.0.1:3000/blog.
To test this I recommend you to use a HTTP development client like this one.
I assume you get also a HTTP 500 on http://127.0.0.1:3000/blog. Then something is wrong on your backend. Maybe the correct URI is http://127.0.0.1:3000/blogs? that would be embers default.
If you do a call directly to http://127.0.0.1:3000/blogs from your ember application this will however always result in an error if you don't deliver the CORS headers.
I keep getting this error message while trying to implement the Meteor.loginWithFacebook() method. Login used to work for my app now it doesn't anymore and I have no idea why:
I have it set so when the facebook login button is clicked, the Meteor.loginWithFacebook() method is called, like so (client-side):
'click .facebook-login':function(event){
Meteor.loginWithFacebook({requestPermissions:['user_photos', 'user_videos'], loginStyle:"popup"},function(err){
if (err)
throw new Meteor.Error(err, "Facebook Login Failed");
});
}
Server-side:
ServiceConfiguration.configurations.upsert(
{ service: "facebook" },
{
$set:{
// Development
appId: "App-ID-String",
secret: "App-Secret-String"
}
}
);
Oddly enough, this works fine when working in development but when I push my code to my production server, I get the error above. This code also worked for several months and then just stopped working, in production. I've cleared both databases to start from scratch and I still get the error in production but not development.
Before you mention it, I have separate code blocks to handle the different appId and secret based on development versus production, but the code is essentially the same and accounts for both environments.
Turns out that the Facebook SDK is particular about your URL prefix/host (if there is or is not a 'www' in front of your URL) and treats the URLs as separate sites. When going to my site to login, the non-www prefixed URL version of my site could not login to Facebook but the 'www' one could.
I was able to fix this by forcing my app to reload the 'www' prefixed URL if the non-www URL was accessed using the following code. I tried forwarding using the GoDaddy DNS interface but it didn't work.
Meteor.startup(function () {
if (location.host.indexOf('www') === -1) {
location = 'http://www.example.com';
}
});
This instantly fixed my primary issue though it seems this isn't the most ideal way of handling this since it basically loads the application twice if the user visits the non-www URL.
I have an interesting problem with my Ionic application with a Django API server backend.
In previous versions of my app (0.0.1-.0.0.5) this hasn't come up, but starting now I'm not able to issue a POST request to get my authentication token.
Using Ionic locally ionic serve against my deployed server, when I attempt a login, my server registers an OPTIONS /token-auth/ and then POST /token-auth/. When I run the application on my device ionic run android and attempt to login the server only registers the OPTIONS request but does not register the POST, according to the server logs.
I've found out this is due to CORS, it issues an OPTIONS first to see what it is allowed to issue. For some reason the OPTIONS request comes back with absolutely nothing. In my other Django Rest Framework projects, the OPTIONS comes back with a proper response. I think this is related, but it's strange that it works from localhost to the deployed server with the OPTIONS request responding the same.
My login function is pretty basic:
$http({
method: 'POST',
url: config.apiUrl + 'token-auth/',
data: {
"username": usernameElement[0].value,
"password": passwordElement[0].value
}
}).then(function(data) {
console.log('success', data);
...
}, function(err) {
console.log('error', err);
...
});
Another thing I find interesting is that it runs the error function but instead of giving me back a normal error object in the err variable, I get back what appears to be the request object. I have never seen this before.
{
"data":null,
"status":0,
"config":{
"method":"POST","transformRequest":[null],
"transformResponse":[null],
"url":"http://example.com/api/token-auth/",
"data":{
"username":"myuser",
"password":"mypassword"
},
"headers":{
"Accept":"application/json, text/plain, */*",
"Content-Type":"application/json;charset=utf-8"}
},
"statusText":""
}
Runs fine local app to deployed server
Device app to deployed server doesn't register POST request, only OPTIONS
AJAX error return is the request object, not the error response object
I've been stuck on this for a couple days now and am looking for any ideas.
This was in fact a CORS problem. After debugging through django-cors-headers I found that it was not passing the CORS. I later found out that instead of serving on http://192.168.1.36:8100 for some reason ionic switched to serve on http://192.168.1.10:8100
I got some problems when calling RESTful webservice.
I'm running a Django 1.5 project on google app engine now.
And I make use of httplib in python to call a RESTful webservice.
All methods(PUT, GET, DELETE, POST) work well on my local Machine (python 2.7.5, Django 1.5).
However, the behavior is changed on GAE...
PUT (used to store the data which user edited his information on the sites.), POST method is work well.
The GET method sometimes can't get the latest results from webservice server (not google datastore, the data are stored in other database server, I use the GET method to fetch the data from that server).
The DELETE method is not working totally on GAE.
Here is my code:
import httplib
args = ""
headers = {"Accept":"application/json"}
conn = httplib.HTTPConnection(IP, 8080)
try:
conn.request("DELETE", Some_API_Method_Url, args, headers)
response = conn.getresponse()
res = response.read()
I can't figure out why this happened, hoping someone can help me :(
Thanks in advance!
UPDATED:
I just found why the DELETE method is not working based on this link.
I send an ajax request which type is delete in my js file to my Django backend with the following code:
$.ajax({
type:'DELETE',
url:'some_url',
data:JSON.stringify({'key':'value'}),
contentType: 'application/json; charset=utf-8',
dataType: "text",
success: function(data){...},
error: function(data){...}
});
It seems that the appspot doesn't allow the DELETE request with body(data).
so, I changed the type of the AJAX request to POST, and it works...
I'm trying to call a local webservice/webApi using jquery, but I have been stuck for days. could somebody help me please.
So my webservice is sitting on localhost port 4011 i.e. localhost:4011/api/poi/
And my javascript is sitting on local host port localhost:4213/ and here is how I call it:
$.get('http://localhost:4011/api/values', function (data) {
alert(data);
});
When I enter the url into the browser directly, it returned the result. But when I'm calling it using the jquery. I have no response (by looking from the developer tools).
I'm not sure what I'm doing wrong. Please help.
I'm using webApi mvc .net4 if that helps.
This is due to the Same origin policy. Because the API is on a different port to where you're serving the web page the browser will not allow you to make the request.
You can use jsonp to get around this, or by using cross origin policy on your web service.
Use this if you are using a CrossDomain as CrossDomain doesn't work in jQuery!
$.ajax({
url: 'ajax/test.html',
crossDomain: true,
success: function(data) {
alert(data);
}
});
you might be restricted by the cross origin policy CORS. Configure your web service to accept the requests made from across the domain. You can add Access-Control-Allow-Origin headers like
responseMessage.Headers.Add("Access-Control-Allow-Origin","*");