node.js - Changing localhost server files are served from using Node (Webstorm /maybe IntelliJ) -

-

i'm not sure i'm missing here, can me out. i'm working on project we're using node , in run/edit configurations i've down following:

node interpreter: path node.exe file checked out subversion

working directory: "app.js" file is, path command line type node app.js , starts server

javascript file: app.js name of file creates server

now main nav bar when run / run server box @ bottom pops , tells me express server listening on port 3000. cool.

i can navigate localhost:3000/mypage.html , can page fine.
added json file same directory on hard drive mypage.html in, , can navigate localhost:3000/largetestdata.json.

so server , running , serving file should. problem in webstorm project, want make ajax request largetestdata file. using jquery like: 

 var data = $.get('localhost:3000/largetestdata.json');     data.done(function(data){         console.log('here data');         cnosole.log(data);     })

when error (in chrome)

xmlhttprequest cannot load localhost:3000/largetestdata.json. cross origin requests supported http.

and @ url , i'm seeing: 

http://localhost:63342/

obviously webstorm has started server correctly, when view html file, it's not using server (which, of course why i'm getting cors error.

there's fundamental stuff here i'm not getting. need ide deploy web server started up, it's not doing that. please, give me once on over technologies i'm missing out on here.

webstrom didn't start node.js server, serves static pages own internal http server doesn't know node.js , express.

the main problem:

when start node.js server, it's serving json files on port 3000. if open html-page little menu in webstorm (where can choose browser), webstorm opens browser url pointing own internal webserver running on different port (e.g. 63342). javascript security prohibits loading data different host/port same-origin policy.

it's not webstorm's fault , need solution problem in production or can't go live.

general solution:

either have ensure html pages , json data come same host+port, or can circumnavigate (a) setting server-side headers ('access-control-allow-origin: *') @lena suggested, or (b) using jsonp. below find thoughts using nginx reverse proxy browser's point of view requests go same host+proxy. it's common solution, mentioned above, there other options.

primitive solution:

don't use webstorm open browser. load page http://localhost:3000/ , change url of rest resource $.get('/largetestdata.json'). you'll miss comfort ide, can see program working.

comfortable solution:

as @lena suggested, there way configure express/node.js server known webstorm. haven't tried it, suppose can press run-button , maybe node.js plugin in webstorm intelligent know static-maps in express , know how map html-file web application url , open page in browser url served node.js application. (i'd surprised once again if works magically, maybe can configure mapping files urls manually, don't know.)

dirty solution

with options can disable security checks, @ least in google chrome. it's possible load json data different port html page. wouldn't recommend using these options (just opinion).

additional hints

if more playing around node.js , ui fun , have serve application "production-ready", have @ nginx serve static files , reverse proxy node.js requests there. i'm using setup development , works charm.

of course node.js / express able serve static files well, imo placing nginx in front of node.js (clustered) bring bunch of advantages production sites, e.g. load-balancing, ssl-offloading, avoid jsonp, in many cases performance, easier deployment updates, availability.


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more