I am trying to get started with Ember Data and immediately ran into this problem were the browser sends a OPTIONS request before the actual request.
The development backend I am trying to communicate with is a rails 4.2 server running on my local machine (started with rails s -b 0.0.0.0 )
I currently use this api to communicate from both an android and an ios app. My end goal is to provide an Ember app in addition to the existing rails UI, but if I have to replace it and only have the Ember UI, that will be OK.
I did some reading on CORS and I think at at least understand what it is trying to do. If I understand correctly, the browser sees the Ember app as having been served by a server other than the one that requests are being made to and because of this asks the server if this is OK.
So my questions are:
Will I be able to deploy my ember app to the real server such that these CORS OPTIONS requests are not needed? (ie, I assume a rails app can deliver an Ember app to the browser and the browser will see the source of the script as being the same as the target of the request and not require the prefight requests)
How do I get this to work in development? I see there is a --proxy option on the ember s --proxy, which seemed like it was supposed to be the solution for this, but I have not been able to get it to work
When I navigate to the server url I am trying to access http://localhost:3000/api/v1/users rails logs the following response:
Started GET "/api/v1/users" for 127.0.0.1 at 2016-04-17 10:02:01 -0400
Based on this, I think I have my Ember adapter set up correctly:
import JSONAdapter from 'ember-data/adapters/json-api';
export default JSONAdapter.extend({
host: 'http://127.0.0.1:3000',
namespace: 'api/v1'
});
Then I start the Ember server with this command:
ember s --proxy http://127.0.0.1:3000
The rails server is receiving the following request:
Started OPTIONS "/api/v1/users" for 127.0.0.1 at 2016-04-17 09:36:51 -0400
Which fails because I don't have a route for that (and don't think I want to either).
If you use --proxy you should not override your host!
The ember app should make all request to the current endpoint (probably localhost:4200) and the development server will redirect the requests to the backend.
If you:
Want to serve your ember app from your backend server in production, and
want to use --proxy in your development enviroment
don't set host on your adapter and just have fun. If you set host, ember will sent the data directly to this host, and not to your development server, resulting in a CORS request.
Related
I am new to angular and developed an angular application using angular CLI 7.
When I am running the application from my local system, I am getting the response from the service and it is working fine.
But when I deployed the application in the production server, I am unable to get the response from the service. Service is taking too long to respond and getting the HTTPErrorResponse of status Unknown Error.
We are using the Spring microservices for api calls to get the response data.
I am using the proxy.conf.json for the services because the URL running angular app is different from the service.
proxy.conf.json:
{
"/api/*":{
"target":"http://wsd185erd986.test.com/api",
"secure":false,
"loglevel":debug,
"changeOrigin":true
}
}
Changed the package.json to include the proxy.conf.json in proxyConfig.
Include the response headers in the service.
Could any one know on how to configure these proxy settings in production build for angular. Do we need to include any headers in the service calls.
HTTPErrorResponse - A response that represents an error or failure,
either from a non-successful HTTP status, an error while executing the
request, or some other failure which occurred during the parsing of
the response.
So as per the docs this error is thrown in multiple cases either there is an error at server end and server send the error response or there was some issue in parsing.
Please check the Spring Boot API request logs to see what response code is sent back.
You can check the API by a standalone client too (like Postman) and see if there is some issue.
As an aside - you should not be using angular development server in production as it is meant for angular development. Typically you can use any web server ( like Apache, NGinx etc) to host your angular production files ( they are merely static resources) and then either use them as a proxy ( by having their proxy configuration) or have CORS enabled services.
I've been having some trouble trying to set up a Shopify app so that I can develop it in my local Rails environment.
I've followed the documentation HERE but when I install the app into my shopify dev store I get an error stating localhost sent an invalid response.
My local rails server log shows:
ERROR bad URI '::�+�/�,�0̨̩�\x14�\x13�\x13�\x14\x00�\x00�\x00/\x005\x00'.
ERROR bad Request-Line '\x16\x03\x01\x00�\x01\x00\x00�\x03\x03d��������\x1F�ŭ����=G�+q\r[��� N�\x00\x00 jj�+�/�,�0̨̩�\x14�\x13�\x13�\x14\x00�\x00�\x00/\x005\x00'.
After digging through other shopify docs I found this:
This says to tunnel with ngrok to avoid problems which makes sense, except that the shopify_app documentation states to specify http://localhost:3000 as the application URL and http://localhost:3000/auth/shopify/callback as the Redirection URL.
Can anyone tell me how to set my Shopify app so I can develop it locally? Or is this something I will have to develop live on heroku?
Ngrok is simply a tunnel to localhost, so you can set your application URL to https://subdomain.ngrok.io and redirection URL as https://subdomain.ngrok.io/auth/shopify/callback. You can configure ngrok to tunnel on port 3000 by specifying the port number when initializing ngrok: ./ngrok http 3000.
I have a backend server (powered by Rails), whose APIs are used by a HTML5 frontend that runs on a Node simple development server.
Both are on the same host: my machine.
When I login from the frontend to the backend, rails sent me the session cookie. I can see it in the response headers, the problem is that browsers do not save it.
Policies are right, If I serve the same frontend directly from the rails app cookies are set right.
The only difference I can see is that when the frontend run on Node server, It runs on the port 8080 and rails is on the port 3000. I knew that cookies are not supposed to be port specific, so I am missing what is happening here.
Any thoughts? solutions?
(I need to be able to keep the setup this way, so to have the frontend served from Node and the backend on rails on different ports)
You're correct that cookies are port agnostic, and that the browser will send the same cookies to myapp.local:3000 as myapp.local:8080--except not through XMLHttpRequest (XHR, a.k.a., AJAX) when doing a cross-site request (CORS).
Solution: The request can be told to include cookies and auth headers by setting withCredentials to true on any XMLHttpRequest object. See: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
Or if using the Fetch API, set the option credentials: 'include'. See: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Alternative: since you tagged webpack-dev-server in your question, you might be interested in proxying requests to your Rails API through the webpack-dev-server to avoid any CORS issues in the first place. This is done in your weback.config:
proxy: {
'/some/path': {
target: 'https://other-server.example.com',
secure: false
}
}
See: https://webpack.js.org/configuration/dev-server/#devserverproxy
My locally running rails app (on localhost:3000) responds to requests in the browser or from curl, but is not responding to requests from the desktop postman client, which immediately gives the generic "Could not get any response". Any idea what could be causing this?
For this you can use NGROK. It provides you a tunnel which can easily be used with postman or anyother such service. Download the library from here and run the tunnel as
./ngrok http 3000
or you can use lvh.me:3000 if your request is from same machine.
I can program and develop in Ruby on Rails/JS/HTML/CSS to make a full stack app. However, there are holes in my understanding of the HTTP request/response cycle. Are the following points correct?
If I make a Rails app, and on the command line type rails server I get a local server, which I can make requests to. If I open a browser, type localhost:3000, and press enter, I am making an HTTP request to the local server.
Rails uses by default a web server called WEBrick, though there are others like Thin, Puma, and Unicorn. These are all pieces of software, and what makes them web servers is the fact that the software implements functionality to process HTTP requests.
When I run a local web server, it means that my computer is running one of these pieces of software that listen for HTTP requests.
Is the above what it means "to run a local web server"?
I have seen other examples of ways to "run a local web server". One of the is to run npm install -g http-server in a project directory, and then navigate to localhost:8080. Is this also just software that starts running and accepts HTTP requests on port 8080?
On a Ruby command line, install rack gem: gem install rack. Then in a new Ruby file we require 'rack', start a web server:
Rack::Server.start({ app: MySimpleApp, port: 3000 })
We can then define a web application MySimpleApp that is rack-compliant (object that responds to call method):
class MySimpleApp
def self.call
(...)
end
end
So now when we navigate in our browser to localhost:3000, MySimpleApp is executed. Is rack simply running it's default WEBrick server? Is what the above commands do simply run a local web server and define what to do when an HTTP request comes in (execute MySimpleApp)?
You're pretty much right on your understanding there. HTTP is just a text-based protocol that, like many, operates over TCP/IP.
The built-in WEBrick server isn't the best example of an HTTP server written in Ruby, but it's included for legacy reasons because it's often "good enough" to get you started. Pow is considerably better and despite being produced by the same company that produced Rails it's largely written in Node.
The beauty of HTTP, like a lot of internet based protocols, is it doesn't matter what language you use so long as you comply with the standard.
Rack is a layer that operates behind HTTP and provides a thin layer of abstraction on the request/response cycle.
A server is something that opens up a port (80, 443, 8080) for some sort of data transfer. Port 80 is the HTTP port and port 443 is the HTTPS port. 8080 is a commonly used port for development (as is 3000). https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
A local server by definition is a server running on your machine.
Overall, you are definitely on the right track.