I am trying to send a post request using HttpClient.
constructor (private http: HttpClient) { }
this.http.post(url + 'auth/login', data).subscribe(res => { });
but the browser sends 4 requests instead of only one POST request:
2 OPTIONS requests
1 POST request
1 GET request
I have read that it's called "preflight request" https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests
I am getting a 405 Method Not Allowed error because the server do not support GET requests for this path The GET method is not supported for this route. Supported methods: POST.
Unfortianatilly, I cannot modify the server to accept GET requests, is there anyway that I can prevent the browser from sending a GET request?
Thanks in advance.
I figured out that this happens only on "http://".
I have tried "https://" and it works correctly :)
Related
I'm trying to replicate a post request done normally by a website form via postman but the server returns 500 error.
the form website URL that I'm dealing with is here.
what I have done so far is investigate the network request using chrome or safari dev tools, copy the request as cURL, import the cURL in postman and do the request.
what can be the possible reasons for the failure and what are the alternative ways to achieve the same result?
Postman Headers:
Most probably you must have used invalid request body. The browser shows parsed json body and you might have copied incomple request body.
To get full body click view source and copy the full content.
I am getting a preflight error 405: Method not allowed from the HERE API when I request autocomplete as per the documentation.
UPDATE 2:
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the defaults with a per-client request interceptor and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
UPDATE:
The reason it fails is because HERE does not support the OPTIONS method, only the GET. So now the question is: Why does axios trigger an OPTIONS request when I don't set any headers? An XMLHttpRequest() based GET request does not trigger OPTIONS for the same URL. Something is happening with axios but I don't know what and I can't seem to investigate the headers that axios is sending.
ORIGINAL:
I've tried to find information about this error, as well as HTTP vs HTTPS. I haven't seen others having this problem so I feel like I must be making a simple error. The URL is generated correctly because it works when pasted directly into the browser for example.
const hereClient = axios.create({
baseURL: 'https://autocomplete.geocoder.api.here.com/6.2/'
})
async function searchHere (query) {
let searchTerms = query.split(' ').join('+')
let result = await hereClient.get('suggest.json', {
params: {
app_id: '<APPID>',
app_code: '<APPCODE>',
query: searchTerms
}
})
return processHereSearchResults(result.data)
}
The GET request fails on the OPTION preflight with a 405: Method not allowed. But if I paste the generated URL into a browser then it returns the expected results. For example:
https://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=APPID&app_code=APPCODE&query=8131
returns:
{"suggestions":[{"label":"Česko, Brandýs nad Orlicí, 3123","language":"cs","countryCode":"CZE","locationId":"N . . .
Same result whether http or https.
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the default header setting with a per-client request interceptor to set my authentication and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
Its so weird, im testing my app controller methods on localhost:9000 using postman, for my GET api methods I have no problem access and get response, but for a POST api methods im getting:
play.filters.CSRF - [CSRF] Check failed because no token found in
headers
never seeen this message...
I have the simplest controller:
def invoiceQA(): Action[JsValue] = Action.async(parse.json) { request =>
Future{Ok(Json.toJson("""{"message": "got your json"}"""))}
}
my route:
POST /update controllers.MyController.update
in postman im getting 403 forbidden..
postman address:
http://localhost:9000/update
does someone know why is that..?
If you look at the Play ScalaCsrf Docs, the CSRF filter is configured and the check is made if any of the conditions are given:
The request method is not GET, HEAD or OPTIONS.
The request has one or more Cookie or Authorization headers.
The CORS filter is not configured to trust the request’s origin.
If you don't want CSRF protection at all, you can just disable the filter by adding the following configuration (more info in the Play Filters Docs:
play.filters.disabled+=play.filters.csrf.CSRFFilter
I am trying to access zomato api.
URL: https://developers.zomato.com/api/v2.1/categories
Headers: 'X-Zomato-API-Key':'myapikeyhere-763demoapi434'
If I use chrome's postman extension or curl then I can access the url & getting 200 status code.
But if I run it through my angular2 app or simple ajax, it is giving error at preflight OPTIONS request, error code is 501. I have tried otherways too, error is same. Need help
Zomato API's can only be accessed from server to server calls, the error message you have reported is a security policy implemented by Chrome to prevent cross site request forgery on the client side.
A way you can get around this is to write a handler on your server end to make handler which the ajax call will use, this handler in-turn makes a request to the Zomato's server to retrieve the data required.
This question already has answers here:
Origin is not allowed by Access-Control-Allow-Origin
(18 answers)
Closed 6 years ago.
I am trying to develop a D3 visualisation project for our JIRA boards, but I've fallen at the first hurdle. I'm having trouble authenticating and getting a list of JIRA boards.
This code is entirely client-side and is in Angular 2 RC 3. My service looks like this:
public authenticate( username:string, password:string ):void {
let encodedAuth:string = window.btoa( `${username}:${password}` );
this.headers = new Headers();
this.headers.append( 'Content-Type', 'application/json' );
this.headers.append( 'Authorization', `Basic ${encodedAuth}` );
}
public getAllBoards():Observable<Boards> {
return this.http.get( `http://${this.host}/rest/agile/1.0/board`, this.headers )
.map( response => response.json() as Boards )
}
and the code in my component looks like this:
constructor( protected jiraService:JIRAService ) {
this.jiraService.authenticate('me#you.com', 'password');
this.jiraService.getAllBoards().subscribe(
boards => this.boards = boards
);
}
Unfortunately, this generates what looks like a CORS error in my browser:
XMLHttpRequest cannot load https://myjira.atlassian.net/rest/agile/1.0/board. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.
...which is a little unexpected. This same URL in the browser works fine. Examining the request in Charles I see the error "SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations", but cannot actually find this setting. I don't care if I can't see it in Charles actually, I just want to get it working!
I have tried several of the npm JIRA packages but none of them are remarkable and seem to be designed for server-side development.
Any help greatly appreciated.
You get this error when you access it from within an application that was initially loaded from a different URL. If you load a new page from this "other" URL then this is not a CORS situation because the initial page load is already from this URL.
The server need to provide the expected CORS headers for the browser to allow this request. This is not an Angular issue but only a server issue.
Workarounds are
JSONP (doesn't support custom headers)
provide support server-side where your Angular application calls to your server which then forwards to the other server and then forwards the response it gets to your Angular application.