I am writing a rails backend app. I am providing a rest api to the frontend developer who is workng separately. So for time being I have enabled Cross origin resource sharing by adding following in my application.rb:
#todo remove this once ui is integrated into the app. following allows requests from other domains (disble CORS).
config.action_dispatch.default_headers.merge!({
'Access-Control-Allow-Origin' => '*',
'Access-Control-Request-Method' => '*'
});
I am trying to test out the api by using links on a simple HTML page which I am running off of the python SimplHttpServer. The page is being served at http: // localhost:8000/TestPage.html
When I test one of the links (it sends an ajax request using jquery to the backend which at the moment is running locally as well, on http: // localhost : 3000), I get following error:
GET http://localhost:3000/campaigns/my_campaigns?user_email=swapna%40urbancoding.net&user_token=SNa2kPqkm5ENsZMx7yEi
XMLHttpRequest cannot load http://localhost:3000/campaigns/my_campaigns?user_email=xyz.xyz.com&user_token=xyz. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost : 8000' is therefore not allowed access. The response had HTTP status code 500.
What is going on? How can I resolve this?
Turns out the issue was that the url I was sending the request to (http:// localhost:3000/campaigns/my_campaigns) was incorrect. It was matching an action I did not intend it to match. This action was triggering a 'missing template' exception. Somehow this was causing the No 'Access-Control-Allow-Origin' error. Not sure how that happens, but once I fixed my url to go to the intended action, all was well.
Related
I have a django backend and a Vue 3 frontend.
For handling some request, my backend needs an 'Id-Client' header in the headers of the request.
Developing my BE everything worked like a charm, but now that I'm writing the FE I'm encountering some issues.
As I said before, I need to append an header to my headers in every request.
So the first step was the following:
// Note that the idClient is dynamic and can change.
this.$axios.setHeader('Id-Client', idClient)
const data = await this.$axios.$get(url)
But I can't get it to work, if I try to send that request, my GET request becomes (I don't know why) a OPTIONS request and I get the error "cross origin resource sharing error: HeaderDisallowedByPreflightResponse"
Instead if I remove the set header
// this.$axios.setHeader('Id-Client', idClient)
const data = await this.$axios.$get(url)
The server just respond me correctly giving me the error that the request is missing the 'Id-Client' in the header.
I also have a few request that don't need the 'Id-client' header and those request work, so I don't think is a CORS problem.
Well but is looks like CORS issue. CORS policies are not triggered by simple requests. By adding custom header, your requests are no longer simple and trigger CORS policies (sending OPTIONS before GET)
Your only option is to configure your backend server to reply to OPTIONS requests with the correct headers - Access-Control-Allow-Origin and Access-Control-Allow-Headers (server telling the browser "yes, im ok to accept particular custom header")
IF (and only if) you are planning to serve your Vue SPA from the same API server in production (same origin), you can avoid similar CORS issues during development by using Webpack Dev server Proxy - your SPA will send API requests to Webpack Dev Server (used for developing SPA) and Proxy will route it to your Django dev server. That way all request from your SPA are to the same origin and you don't need to care about CORS at all...
I was trying to use my api and I have a function on ember app to login but when the login action is trigerred I receive a message below. What is the reason I am receiving this error?
login:1 Access to fetch at 'https://app-dev.some-url.com.au/api/login' from origin
'http://localhost:4099' has been blocked by CORS policy: Response to preflight request doesn't
pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch
the resource with CORS disabled.
Your API server isn’t configured to accept requests that come from a web application on another origin. Some options:
Configure your API to serve the Access-Control-Allow-Origin header
on the OPTIONS request that the browser makes to test this. It
could be Access-Control-Allow-Origin: * if you’re lazy or can’t
know in advance what origins people will be coming from. It’s hard
to be more specific about this without knowing details of your API.
Use Ember CLI’s API
proxying
feature to bypass the need for CORS. This is for development mode
only, though. You’d need a similar solution in production where
Ember CLI’s development server isn’t present.
I'm almost complete with a new web app, however, I'm getting a 403 error from AWS's API Gateway due to a CORs issue.
I'm creating a Vue app and using Vue's axios library. CORs is enabled and the request works with API Key Required option turned off in AWS's API Gateway by sending the following:
axios
.get('My-URL-Endpoint',{headers: {})
.then(response => (this.passports = response.data ));
When I turn on API Key Required functionality inside AWS's API Gateway. It works when I use Postman along with including x-api-key: My-API-Key. However, using Vue's axios it does not work and returns error 403:
axios
.get('My-URL-Endpoint', {headers: {
'x-api-key': 'My-API-Key'
}})
.then(response => (this.passports = response.data ));
My first instinct is that the problem is related to how Axios is sending the request through the browser. From what I can gather it looks like the pre-flight check is failing because I am receiving the following error within the browser:
Access to XMLHttpRequest at 'My-URL' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Sure enough it looks like there is no access-control-allow-origin key in the response. So I added access-control-allow-origin to the response of the 403 message and got a new error "It does not have HTTP ok status"
I've been trying nearly everything to get this to work! I came across stackoverflow answer where it seems like the person was suggesting that API Key Required Key functionality can't work with CORs. This kind of seemed like that cannot be true. It would be a pretty crippling restriction.
So my question is how to get the browser's pre-flight check to work along with CORs and API Key capability inside AWS's API Gateway?
Thank you!
If you have enabled cors on your api gateway, the next place to look is the application code such as lambda. Make sure the Lambda is returning the correct cross origin headers in both successful and failure scenarios.
First of all you can check if the request is reaching the lambda from the cloud watch logs. Another way to check this is to temporarily point the Api gateway target to the Mock end point.
If the mock endpoint works, then the problem is the application code. otherwise the problem is in your api gateway end point.
Also note that any headers you use should be white listed in the Access-Control-Allow-headers section when you enable to cors for your method/resource.
I wrote a REST services with Symfony FOSRestBundle. It work fine with GET request.
Now, I am trying to access with Ember « models" and I get an error message. Indeed, Ember try to access with OPTIONS request (preflight) and It failed with « Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response ».
I tried to access the REST service with Postman and I got this error :
with OPTIONS http://myUrl.local/groups : "405 Method Not Allowed »
but it works fine if I call OPTIONS http://myUrl.local/
I use apache under El Capitan (IMac).
I tried to append these lines to /private/etc/apache2/extra/httpd-default.conf :
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
I tried to append these lines in directive in my VirtualHost.
Same results in both case.
Is the problem in Symfony or FOSrestBundle.
I need help to understand what is happening. How I can resolve my problem.
I assume that your Ember application is not hosted on the same domain as your Symfony application – it might be an app on your phone? This makes your requests adhere to the CORS protocol (Cross-Origin Resource Sharing).
You have correctly identified the headers you need to set. The reason why it doesn't work is that /groups probably routes to an action similar to this:
<?php
namespace AppBundle\Controller;
class GroupsController
{
public function getGroupsAction()
{} // "get_users" [GET] /users
}
As this action requires the method GET, FOSRestBundle blocks requests of any other method and returns the status code 405 you are getting. That's also why an OPTIONS request to / worked fine – it's not your server blocking it, it's FOSRestBundle.
Use the NelmioCorsBundle to correctly handle preflights. The bundle
Handles CORS preflight OPTIONS requests
Adds CORS headers to your responses
See issue #587 for reference.
My app is an Ember.js front end with a Go API on the server. I created the Ember app using the FixtureAdapter. Now that I have the Go API back end I converted it to RESTAdapter.
When I hit my API directly with the browser, I seem to get the appropriate CORS headers back:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Origin,x-requested-with
Access-Control-Allow-Methods:PUT,PATCH,GET,POST
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:Content-Length
However, when my Ember.js app hits the API, I get XMLHttpRequest cannot load https://192.168.59.103:8001/notifications. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.59.103:9000' is therefore not allowed access..
I don't know how else to see what's going on between Ember and the API. I've read this CORS tutorial and everything seems to be okay on the server end.
I included the bit about x-requested-with because of another Stack Overflow question suggesting that jQuery requests need something different than plain old JavaScript requests.
Your endpoints also need to respond with CORS headers to OPTIONS requests- those will execute before the actual request to make sure that the request is allowed first.
Do you happen to be using Nginx as your reverse proxy for your API? If so, we experienced this same issue. In our case, the problem was that Nginx returns the correct CORS headers just fine for HTTP 200 OK responses, but for any error response, it will fail to add the COR headers and therefore the actual server response gets obscured by the browser complaining that it doesn't have the appropriate CORS headers to render a response.
See https://serverfault.com/a/431580/199943.
Even if you're not using Nginx, try calling your API directly (e.g. using Postman to avoid the CORS restrictions to see what it's returning. If your API is returning anything other than an HTTP 200 OK, that may be why the CORS headers aren't getting added.