I'm writing my first Knockout Js application and I'm stuck trying to make an ajax request to my service (I'm new to web development in general).
I already found out that the problem is same-origin policy, and the reason I'm getting blocked by this I think has to do with my development setup: I'm using WebStorm to write my html/js and launching the page with its built-in webserver, which serves at port 63342; and my REST service is self-hosted, written in go, and running at 8080.
When the application is finished, I'd like to serve both the REST api and the Web app from my go server, but while developing the WebStrom server is really convenient.
Do any of you guys have similar problems? How do you work it out? Should I try to serve everything from my go server even during development? My server is not ready to serve any static content yet. Or should I try to use PJSON, even though I don't think I need it in my final app?
This is the error I get in my chrome develoment tools:
XMLHttpRequest cannot load http://localhost:8080/lines/03/pos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
You could CORS-enable your REST service, and make sure that your web app is sending CORS request headers.
I'm not proficient in either Go or WebStorm, but I recommend investigating CORS.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Turns out it took only a couple of lines of code to serve static content from my go server, so I just did that and now everything is working fine.
Thanks for your help though!
Best regards
Related
I'm trying to build a React Webapp to group and display superchats while a livestream is running.
What I've tried so far (unsuccessfully) is to use the YouTube LiveChat API, however this requires authentication from the live stream owner (which I do not have)
The second thing I've tried is to use youtube-chat, however this does not work. (I ran into CORS issues: Access to XMLHttpRequest at 'https://consent.youtube.com/m?continue=https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUCdQPeeJ0qGK6wWBiEJWcdsQ%2Flive&gl=NO&m=0&pc=yt&uxe=23983171&hl=en&src=1' (redirected from 'http://localhost:3000/channel/UCdQPeeJ0qGK6wWBiEJWcdsQ/live') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.. I've proxied all requests to https://www.youtube.com. Even without the CORS issues, the library does not seem to work as it should, so I'm probably looking for another option.
The intent of the library seems to be to scrape the YouTube native HTML element and read the chat messages from there, but this library seems to be deprecated and not take into consideration the YouTube cookie-consent screen.
I was thinking of mabye using Selenium and scrape the data that way, but I'm not sure if that would work. Any help on this issue would be greatly appreciated.
CORS will block any requests from your website to another website, that didn't authorize this. To solve this, write a small backend server, that uses youtube-chat to fetch your comments and relays it to your frontend. That way, you bypass CORS.
I am trying to access this address:
http://52.208.91.209:3000/?paging=1
Accessing manually works fine.
Accessing via an Angular 4 request returns:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
I have googled it for a few hours and did not find a solution.
The only "solution" I have found is using Allow-Control-Allow-Origin plugin.
The address I am trying to access is not mine.
I am just trying to work with it.
I have even read about proxies when using ng serve with angular CLI but didnt fully understand.
All of the solutions I saw are simply a response headers problem on the server side. However, This is NOT my server so I cannot configure it.
Any help would be appreciated. Thank you.
You can change your frontend JavaScript code to instead make the request through a public proxy.
To try that, change your code to use the following URL:
https://cors-anywhere.herokuapp.com/http://52.208.91.209:3000/?paging=1
That’ll cause the request to go to https://cors-anywhere.herokuapp.com, a open CORS proxy that sends the request on to the http://52.208.91.209:3000/?paging=1 URL you want.
That proxy gets the response, takes it and adds the Access-Control-Allow-Origin response header to it, and then finally passes that back to your requesting frontend code as the response.
So in the end because the browser sees a response with the Access-Control-Allow-Origin response header, the browser allows your frontend JavaScript code to access the response.
Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.
You need a proxy in this case because http://52.208.91.209:3000/?paging=1 itself doesn’t send the Access-Control-Allow-Origin response header—and in that case your browser will not allow your frontend JavaScript code to access a response from that server cross-origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS has more details.
You can't access that API the way you want to from the browser. There are security measures in place to prevent this from happening. If you do not control the source of the data, you cannot do anything to fix this. Your only option is to have your own server request the data, and you then go through your server to get the data.
Edit: You actually can do this if you only plan to run it locally. Chrome has flags to ignore this security measure. If you don't plan on using this on any machine other than your own, you can force chrome to allow this locally.
The solution I've found was to build my project with the right host using
ng build --production -host=myDomain.com
I'm a beginner learning node and angular but running into many issues. I have Angular running on Node, and my code in Angular makes http requests to retrieve json from an API on another web server (this web server is something I add routes to and I'm not allowed to enable CORS on it). I'm getting 'CORS blocked' due to my http request although I know this resource is accessible. I understand that you have to enable CORS in the web server but in this case that is not an option. There is another web app (not running on the same origin as the resource) that is doing a similar thing to mine but instead he uses node to retrieve the json data and then I think he sends that to angular to process. Is this a possible work around?
Yes it is. If you can't enable cors headers on the server then the only thing you can do is access the server from your nodejs or any other type of server. If you eventually plan to run your angular in cordova you could make a direct $http request because cordova does not block corsable requests.
I'm new to AJAX development. Due to same-origin policy, the most inconvenient thing for me so far is to modify the host information string (such as absolute URLs) in JavaScript files every time whenever I try to deploy the local files to the remote. I thought about writing a shell script for doing this but it seems awkward and not flexible. What's the best practice for doing this?
EDIT:
What if I wanna debug the remote AJAX app instead?
Add Access-Control-Allow-Origin: * header to your response. It's depends on what backend or server side you are using. There are some reference:
HTTP Access Control
Enable CORS in Apache
Website about "enable cross-origin resource sharing"
I am writing an app that will send POST/GET requests from a remote client to a server. As a way to test and also educate myself I was trying to make these requests by writing a simple html file that resides on my desktop with a form that would POST to a server side php file. I also tried using ajax style requests or XMLHttprequests independent of and connected to a form but I received an error in the console:
Cross Origin Request Blocked
For all attempts form or no form. I have read that this is because I am making the request from FILE:// and this is not allowed by browsers unless CORS is enabled in some way. I have also read that using a webserver to host the file might fix the problem but I don't understand what is meant by webserver (separate or same domain? lamp, xammp, mamp?) and I am not interested in overriding security (allowing cors with headers) if I am eventually going to have to find a secure way when it goes live anyway.
As I said I am really just trying to test and I would like my html files to communicate with the server-side php from another machine instead of just putting all files together in the same domain/folder. Is there a way to do this using html/javascript or Websockets or anything html5 has to offer that might be useful?
code examples are welcome but if anyone could help me grasp this concept better it would be greatly appreciated. I am a noob XD
I am open to a better approach entirely if one exists, the only constraint I have is that everything on the UI/Client end is going to be written in html/javascript but I can utilize either or both intel XDK api and Cordova api as well.
Please help and thank you.
If you need to send some HTTP requests to test the server-side of your app I would strongly recommend you use an HTTP client like Fiddler:
http://www.telerik.com/fiddler
Also, read this:
GUI HTTP client
A desktop-based client will have a nice GUI with plenty of features to tweak, save, send, resend your requests.
One thing you can do is use pythons SimpleHTTPServer to serve the html file. Then when you go to your browser and go to 127.0.0.1:8000 the origin will be the same.
You can run the server by going into the directory that has the html file and running the command python -m SimpleHTTPServer 8000. This will serve the content of that directory on port 8000 and it should allow the requests to be made without a CORS exception.
Heres the documentation https://docs.python.org/2/library/simplehttpserver.html
I recommend that you disable the same-origin policy in your browser in order to test cross domain AJAX request from a local file.
For example, with Google Chrome on Windows you can disable this by launching chrome with the following command :
C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
Together, both of these flags will allow you to test cross-domain ajax requests from a local file. These flags are relevant across Mac, Windows and Linux.
This is not on how to write the requests but you can bypass writing those if you are using the latest version of the Intel XDK. If you go to the services tab in the latest version of the Intel XDK, there is a service by the name of Sandbox Explorer. It has a GET and POST method UI. Just plug in the URL and you will see the response immediately. You can use this to debug the server that you are writing. Once you have the server returning the right response, create a data binding to use the GET API in your client side javascript or html code. Cross origin is taken care of.