I have a page 'https://localhost:58525' with content from API json response.
Api url 'http://localhost:51492/api/claimrequest/SearchNewClaimRequests'.
Fidder Autoresponder:
I added Autoresponder rule with request url pattern 'EXACT:http://localhost:51492/api/claimrequest/SearchNewClaimRequests' with response from a txt file.
Am getting below error when I try to load the page.
XMLHttpRequest cannot load http://localhost:51492/api/claimrequest/SearchNewClaimRequests. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:58525' is therefore not allowed access.
Is there any way to add cross origin headers?
Related
TLDR; How do I set a custom HTTP request header in redirect?
Below code redirects to an external service but fails to pass 'Authorization' request header to target. I can see the header in response before redirect happens - can it be forwarded somehow?
#app.route('/external_page')
def external_page():
if not request.cookies.get('id_token'):
return flask.redirect(flask.url_for('login',_external=True,_scheme=SCHEME))
response = flask.redirect(flask.url_for('https://external_service_url/v1/ui'))
response.headers['Authorization'] = 'token_id'
return response
Answer:
It's not possible, in HTTP and not in any framework.
The only way for a site to instruct a browser to issue an HTTP request
with a custom header is to use Javascript and the XMLHttpRequest
object. And it needs CORS implemented on the target server to allow
such ajax requests.
Source: Redirect to page and send custom HTTP headers
It's not possible
See Redirect to page and send custom HTTP headers
The only way for a site to instruct a browser to issue an HTTP request
with a custom header is to use Javascript and the XMLHttpRequest
object. And it needs CORS implemented on the target server to allow
such ajax requests.
I am on my way to creating an API using AWS API Gateway. I have created a PUT method to perform some functionality on my database.
You can see in the image below, I have set the following as my response headers on AWS.
This is how I am making my request to React JS:
fetch('https://myawsurl.execute-api.ap-southeast-2.amazonaws.com/Dev/search', {
method: 'PUT',
headers: {
'Content-Type':'application/json',
'Access-Control-Request-Method': 'PUT',
'Access-Control-Request-Headers': 'Content-Type'
},
body: {
"searchby": JSON.stringify({"searchby":"test"}),
}
}).then(res=>res.json()).
then((data)=>this.setState({
jobs:data,
isLoading:false,
}));
Whenever I invoke the fetch, I get the following error on my chrome console:
'Access to fetch at 'https://myawsurl.execute-api.ap-southeast-2.amazonaws.com/Dev/search' from origin 'http://localhost:3000' 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.'
From what I see I have clearly got the 'Access-Control-Allow-Origin' on my response.
I know postman works differently, but I don't any get error while making the same request on the postman.
Here is a screenshot of what response header for the same request made via postman
Strangely, The error on firefox is differently than to that of the chrome.
Seems like you already have your answer but for others browsing this post the reason for the failure is that the CORS headers were not returned by the OPTIONS method.
The browser calls this method on our behalf before calling the PUT method. This is expected behavior.
Here is api gateway's documentation on CORS
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html
I have a Jupyter KernelGatewayApp running on a VM instance in Google cloud. I defined an API which responds to a GET statement.
If I combine the ip address of the VM instance with the port of the Kernel Gateway and the GET statement with the right parameters, I get the desired result.
However, I would like to call the API using a javascript button on another site. This doesn't work as the browser is first sending an OPTIONS statement which I don't manage to respond to correctly.
Concretely, I have the following:
Running Jupyter Kernel Gateway on port 8888 : 33.44.567.789:8888
Working API : 33.44.567.789:8888/api?fname=john&lname=doe
Other website where a javascript button calls the above API : johndoe.me
Returns following error on requestor (browser) side:
XMLHttpRequest cannot load
http://33.44.567.789:8888/api?fname=john&lname=doe. Request header
field Content-type is not allowed by Access-Control-Allow-Headers in
preflight response.
Generates following message on server:
INFO:tornado.access:200 OPTIONS /api?fname=john&lname=doe
(xx.xxx.xx.xxx) 1.2 ms
Because of the thing I read here I added all different sort of parameters when launching the Jupyter Kernel Gateway:
jupyter kernelgateway --KernelGatewayApp.api='kernel_gateway.notebook_http' --KernelGatewayApp.seed_uri='/home/dummy_gmail_com/code/test_api.ipynb' --KernelGatewayApp.allow_origin='http://johndoe.me' --KernelGatewayApp.allow_methods='GET,OPTIONS,POST' --KernelGatewayApp.allow_credentials='true' --KernelGateway.allow_headers='Origin, X-Requested-With, Content-Type, Accept, content-type' --KernelGatewayApp.expose_headers='Origin, X-Requested-With, Content-Type,Accept' --KernelGatewayApp.answer_yes=True
The issue seems to be that the browser is issuing an OPTIONS instead of a GET but I'm not really sure. Is this linked to the cross origin fact ? Is there a way to handle this correctly or a way around this ?
Having had the same problem I found that CORS requests served by Jupyter Kernel Gateway worked with the following parameters:
jupyter kernelgateway --KernelGatewayApp.api='kernel_gateway.notebook_http' --KernelGatewayApp.seed_uri='/home/dummy_gmail_com/code/test_api.ipynb' --KernelGatewayApp.allow_origin='http://johndoe.me'
(Using OP's domains etc. for consistency.)
The parameter KernelGatewayApp.allow_origin='*' also worked/Solved the problem.
However I did go wrong prompted by the initial browser console error message which ran:
Access to fetch at 'http://localhost:8889/convert?degrees=164' from origin
'http://localhost:3000' has been blocked by CORS policy:
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.
This prompted me to set the request mode to 'no-cors'. The effect of this is to prevent an Origin header being sent with the request. Under these circumstances no amount of tinkering with the kernel gateway parameters resulted in a successful response.
Also when specifying the Allow Origin header as anything other than '*' it needs to be an exact string match to the 'Origin' header. For example:
Allow-Origin: http://127.0.0.1 does not match Origin: http://localhost
Allow-Origin: localhost does not match Origin: http://localhost
Allow-Origin: http://localhost/ does not match Origin: http://localhost
Allow-Origin: http://localhost does not match Origin: http://localhost:3000
etc.
as you can see with service /siteupdate, you can allow origin on a per service basis
Ionic 2
I am using login provider but when i set the access control to
res.header('Access-Control-Allow-Origin', '*');
It is not working
But it works properly when i use
res.header('Access-Control-Allow-Origin', 'http://localhost:8100');
It is working
but now i want to deploy my app up on phone device i need to set it to wild card res.header('Access-Control-Allow-Origin', '*');. since my app on phone not working on http://localhost:8100 anymore
Anyone can help me solve this problem ?
If you are making a preflighted request then the wildcard is forbidden in the Access-Control-Allow-Origin header.
You can read the Origin request header in order to find out the origin. Then you can test it against a list of allowed origins (you could also assume that any origin is OK, but for a preflighted request there is a good chance that complete public access would be a security risk). Finally you can copy it into the Access-Control-Allow-Origin response header.
How is your HTTP request from your app looks like?
Look for "Types of CORS requests" in this article.
If your HTTP request is a simple one, i.e.
Method is HEAD, GET, or POST
Only have these headers
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type of application/x-www-url-encoded, multipart/form-data, or text/plain
If your HTTP request is a simple one, preflight is not needed. And Access-Control-Allow-Origin with * is accepted by the mobile app.
Otherwise, a preflight request will be made (i.e. OPTION request) and Access-Control-Allow-Origin of * will be ignored. It must be fully specified like http://localhost:8100.
I am developing an ajax form update on localhost in express.js for learning express.js
The origin in header is alway set to be null by browser for CORS request (tried: firefox, chrome and safari)
Question:
1. "Origin: null" in request header is not the problem of express.js. Is this correct?
Why they(is it the browsers?) set the Origin to null? I think it should look like this one: "localhost:3000/myproject/test/form.html"
Should I use jquery ($.ajax() or $.ajaxSetup()) to set the origin, before calling ajax on localhost?
How to make the origin in header reflect the real situation?
Here is the screenshot: [...the screenshot is gone now...]
I read the following article about the CORS. The origin in header is null, which is not explained. Please help.
http://www.html5rocks.com/en/tutorials/cors/
"The first thing to note is that a valid CORS request always contains an Origin header. This Origin header is added by the browser, and can not be controlled by the user."
How to allow CORS?
The Origin header is null because you are making the CORS request from a local file (I bet the url starts with file://). In order to get a "normal" origin, you need to host the client file on a web server and access that file using http or https.
Also note that the Origin value is set by the browser and can not be overridden by client JavaScript code.
(P.S. I wrote that HTML Rocks article, I'll make a note to add a section about null Origin)