I have strange error in online IDE like CodeSandBox/StackBlitz.
I do a sample http request (with axios but with fetch or others the problem is the same) and try to print the response in the console.
I use React for the front and node (listen port 8080) for the back,
I precise that work when I do exactly the same with create react app, using npm start (localhost:3000 and http request in http://[public ip]:8080/coucou)
react code here (request is in the Main.js file):
https://codesandbox.io/s/ww28ry45pl
When I just put http://[public ip]:8080/coucou that work to and I have the good response from server.
Here the error returned by server in codeSandBox (captured by the catch bloc) :
Error {stack:
"createError#https://ww28ry45pl.codesandbox.io/node_modules/axios/lib/core/createError.js:16:15
handleError#https://ww28ry45pl.codesandbox.io/node_modules/axios/lib/adapters/xhr.js:87:14
"}
I haven't found anything about this problem.
This is because you are making an HTTP call from a secure communication point (codesandbox). You can simply use/add https on your public URL and it shall work. HTTP Ajax Request via HTTPS Page
In my case I was calling Localhost from codesandbox in https. I solved it by Enabling CORS handling on my localhost server.
Just try again without http:// prefix in the URL. I solved same error :)
Related
I moved my REST API web app to registered domain. On localhost is working as intended, however when deploying to server I get following error
Failed to load resource: the server responded with a status of 404 ()
I use JS to access REST API.
Localhost http://localhost:8080/EB-Software/apii/user-form/retrieve worked perfectly, whereas http://eb-software.uk/EB-Software/apii/user-form/retrieve leads to error above.
Please help
Update the URL like this, just remove EB-Software
http://eb-software.uk/apii/user-form/retrieve
I am struggling from 2 days to solve the issue with my Laravel app which I have uploaded on Heroku server. This application is uploading a file through ajax request showing upload progress also on the page and it returns json response.
I have set the Content-Type: application/json and X-CSRF-TOKEN is also valid in the header but still after completing the upload instead of returning valid json response, it setting status to 301 and 302 and move to home page.
I have tested this Laravel app on my local server and its very stable there. I am thinking if there is any way to pause chrome before loading the redirection page by hitting a breakpoint, so I could know whats happening before the redirection. I have already tried this in console:
window.addEventListener("beforeunload", function() { debugger; }, false)
but it never trigger a breakpoint. Any help will be appreciated.
Finally after 2 hectic days in scrubbing my head with Heroku server, I figured out that Heroku Apache server requires that Laravel route should be set to handle both POST and GET method. In my case I have to use this:
Route::match(['get', 'post'], '/xls2db', 'HomeController#xls2db')->name('xls2db');
This does makes sense because after Ajax POST method it returns json response which will only be handled if the route accepts GET method also.
On my local server I was testing my app with php artisan serve which can GET json response with only POST route.
I am building a website using NodeJS, and I deploy it to Heroku. But when I open the website, something went wrong. Here is the problem:
Code:
In the main source file of my web:
app.get('/', (req, res) => {
var data = {
rootURL: `${req.protocol}://${req.get('Host')}`,
};
res.render('home.html', data);
});
Then, in home.html, I include the following script:
<script type="text/javascript">
$.getJSON('{{rootURL}}'+'/about', {}, function(data){
// Code here is deleted for now.
}).fail(function(evt) {
// Code here is deleted for now.
});
</script>
Here I use hbs template, so {{rootURL}} is equal to the 'rootURL' property within the 'data' object rendered along with the 'home.html' page.
The '/about' is one of the APIs I designed for my web. It basically sends back something about the website itself and this information is wrapped in JSON.
Then, here comes the problem. The code works fine locally, and works well when I send HTTP request instead of HTTPS to Heroku. But if I send HTTPS request to Heroku, I'll get 'Mixed Content' Errors:
Errors I get in Chrome Console.
I then switched to 'Elements' tab in the developers tool, and I saw this:
The schema is HTTP, not HTTPS!
I'm very confused here. I just grab the 'protocol' property within the 'req' object, and fill in the template with it. So, I'm assuming if I enter '[my-website-name].herokuapp.com' with 'https' schema in my Chrome Browser, my nodeJS app deployed on Heroku should get 'https' for req.protocol. But Apparently it's not the case. What is wrong here?
I assume you don't actually have an SSL certificate? Heroku will be providing the HTTPS, but it will then translate it to normal HTTP internally when it hits your express endpoint, which is why it sees req.protocol as HTTP.
Is there any point in even providing the URL to getJSON? Why not just send it $.getJSON('/about', callback) and let the browser handle that?
Also, you haven't hidden your URL in that first image you uploaded, if that's what you were intending.
Heroku router is doing SSL termination, so no matter if you connect via http or https, you get http on your side. Original protocol is however set in X-Forward-Proto header. You need use this value.
So this is my current code
When I delete the Authorization from the headers the request will be successful, and i get the response. But when I use the Authorization header, it will give me this error.
The server is using Python Django and using this libary for CORS Handling
EDIT 1: This is the python server settings
EDIT 2: Add Browser
I use Chrome Version 53.0.2785.143 m (64-bit)
EDIT 3: Postman response
Just got weird response here. When the backend guy tried from his laptop, he got the complete header. like this:
But when i use my laptop, i got this response:
I'm guessing cors is not allowing the Authorization header. So, lets add that the Authorization entry to CORS_ALLOW_HEADERS
CORS_ALLOW_HEADERS = (
...
'Authorization',
...
)
Solved!
It's caused by the App Enlight plugin for monitoring. When I remove it, everything works without errors :)
I've a web application wich makes Ajax requests to a server with Codeigniter-php code. The Ajax requests work correctly in local server but not when the application is hosted in remote server.
The console errors are:
XMLHttpRequest cannot load http://localhost/CI-example/index.php/control/controlHome. Origin http://www.page.com is not allowed by Access-Control-Allow-Origin.
Surprisingly, the request is made in the server but not the response.
The URL that I use to Ajax request is:
AJAX_URL = "http://localhost/CI-example/site/index.php/control/controlHome";
But, also I've tried with:
AJAX_URL = "http://www.page.com/CI-example/site/index.php/control/controlHome";
And the next error is captured:
POST http://www.page.com/webdom/site/index.php/control/controlHome 500 (Internal Server Error)
How can I do?
Edit:
www.page.com is a subdomain. Is necessary to do some configuration when a subdomain is used to Ajax request?
And the folders organization is:
/CI-example
---/application/controllers/control.php
---/system
---/site/js/ajaxRequest.js
As I am getting here, while you are sending ajax requests to the server than it's returning 500 (Internal Server Error). I'm sure that the error is from server side, and there may be following reason-
If everything is fine in the codes, then may be your base_url is different from what you are requesting. Yes this can cause the problem, for example if you have hosted your web application and your base_url is www.mysite.com and you are requesting for mysite.com.
Next reason may be, that you have developed your project in windows or any system which is in-case-sensitive but when you will upload to any linux like server than each and every file name will be case-sensitive. For example suppose a model file name you have given is MyModel.php but when you will load the model, it will generate the error like Unable to find the specific class.
You cannot make HTTP POST requests using AJAX to a different domain, unless that page allows you to do so using a special header called "Access-Control-Allow-Origin".
localhost is different to page.com which is why this will not work.
Response on the http://www.page.com's url say something has gone wrong during the page execution. Your PHP error log should help you to find what.
Adding the line ini_set('display_errors', 1) might return the error to the ajax request, in the error handler. Don't forget to remove the line after use, you don't want this lying around in production code.
The second error is : 500 (Internal Server Error)
This means there was an error on the server side - not a cross-origin policy problem.
This is probably an error in the execution of your PHP script.
Check your error log (e.g : if you use the standard LAMP stack, the error log should be somewhere in /var/log/apache2/)
try this,
http://localhost/CI-example/index.php/control/controlHome
instead of
http://localhost/CI-example/site/index.php/control/controlHome
in your ajax URL.
As from your folder structure, there is no need to include "site" in your URL