In my Vuejs application on calling API to make a payment and I get 303 as status code and In the header, I can see Location:
http://local.xyz.in:1024/payment-success
In the browser's network console, I can see log for
http://local.xyz.in:1024/payment-success
but the page doesn't redirect to payment-success page and show following error on the console
Failed to load http://local.xyz.in:1024/payment-success:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'null' is therefore not allowed access.
Thank you in advance.
You are running into CORS issues. There are several ways to fix/workaround this.
Turn off CORS. For example how to turn off cors in chrome
Use a plugin for your browser
Hi I am having an issue with CORS on safari. My request is working fine in every other browser except safari. I keep getting the error message [host] not allowed by Access-Control-Allow-Origin although the api specifically sets the request url in the response for both the OPTIONS request and the POST request.
I have researched this endlessly but nothing I have found has worked.
I have attached a screenshot from chrome which you can see all of the request and response headers and a screenshot from Safari where you can see the error. It is exactly the same request with exactly the same parameters.
Chrome:
Safari:
Thanks in advance!
Cross Origin Resource Sharing calls are generally blocked by browsers and thus API calls made from a website (in your case localhost:3004) to a remote host 52.85.173.227 (I think you have hosted it in Amazon's API Gateway).
What you need to do to enable CORS .
If you are using AMazon's API Gateway .
Click on the resources and in the Action , you have an option where you can enable CORS . Do that and it will add the headers to enable CORS .
Option on AWS API Gateway to enable CORS
Once you do this your response header of OPTIONS call will have "Access-Control-Allow-Origin" as "*" .
Thus your browser / web site will be able to make cross origin calls.
Hope this helps.
I have a PHP REST service and a Ionic2 project that 'out of the box' runs on Node.js localhost:8100. The REST service runs on my computer on localhost:80. When I want to do calls from Ionic2 (Angular2) to my server on localhost I get this error in the browser console:
XMLHttpRequest cannot load http://localhost/app_dev.php/login.
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:8100' is therefore not allowed access.
The response had HTTP status code 404.
Wat I understand is that this is a CORS issue (Cross origin resource sharing). As I understand A way to solve this would be to change the build script in ionic to point to a front end distribution location in my Apache project and run the whole project from localhost:80. Another solution is to change the 'Access-Control-Allow-Origin' header.
What is the most simple straight forward solution for this problem?
Checked the possible duplicates, and there was an potential ANSWER to which I want to add some more detail:
Since you are dealing with PHP, the following has worked for me by just adding on top of your php script the following:
<?php
header('Access-Control-Allow-Origin: *'); // this!
header('Access-Control-Allow-Headers: Content-Type'); // and this!
//more code here
?>
During development, you might very possibly need to enable CORS in your browser, here's an extension for CHROME
Hope this helps! :)
I have a site, which uses where2GetIt API. I need to get some data from this site,
but after making request, I get "No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'null' is therefore not allowed access" error.
I assume, that the problem is, that I have not access to API. How can I get the access to API?
If you're doing this with Javascript, make sure you understand CORS
...CORS gives web servers cross-domain access controls, which enable
secure cross-domain data transfers. Modern browsers use CORS in an API
container - such as XMLHttpRequest - to mitigate risks of cross-origin
HTTP requests.
See also this StackOverflow question How does Access-Control-Allow-Origin header work?
I want to share some dynamic content on google+. For this I checked it https://developers.google.com/+/web/share/interactive#rendering_the_button_with_javascript
<head>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body>
<button
class="g-interactivepost"
data-contenturl="http://www.pubandbar-network.co.uk/"
data-clientid="102180630313.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"> Share
</button>
</body>
But when executing I am getting this error
Error: origin_mismatch
Request Details
scope=https://www.googleapis.com/auth/plus.login
response_type=code token id_token gsession
access_type=online
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay554026710
origin=http://www.pubandbar-network.co.uk
state=1995523240|0.4607792083184853
display=page
client_id=102180630313.apps.googleusercontent.com
authuser=0
Please suggest how to fix this
Origin mismatch is normally caused by the Javascript origins not being set correctly in the API project console. You need to make sure that the Javascript origins match the domain from which your requests are coming and to which you are returning the user after sign in.
More details can be found in the developer documentation in the "Create a client ID and client secret" section.
Note: A common mistake here is to add javascript origins for http:// but not https:// (or vice versa). If you want to allow users to access your site from both then you need to list both in the javascript console.
Note (Thanks Bethel Goka): You must include the port number of your server in the javascript origins if a port number appears in the url when users access your site.
It worked for me by removing "www." from google console. I simply used http://example.com and it worked ...
For VS users:
Open Properties of your project and get Project URL:
This is your Javascript Origins
Change also the Redirect URIs. It should be your origins + "/oauth2callback"
For me:
(The error has the answer for you)
need to set javascript origin in google console api As
origin=**http://www.pubandbar-network.co.uk**
scope=https://www.googleapis.com/auth/plus.login
response_type=code token id_token gsession
access_type=online
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay554026710
*origin=http://www.pubandbar-network.co.uk*
state=1995523240|0.4607792083184853
display=page
client_id=102180630313.apps.googleusercontent.com
authuser=0
My default javascript origins is https://www ,
my website does not support https:// ,
I included http://www. http:// https://www. and https:// ,
it works.
If your client id, client secret, and your javascript origins url is correct you might want to check whether the port you're using is exactly the same with the url you put in for javascript origins. I mistyped mine by one digit: e, g localhost:888 instead of localhost:8888 and got that error because my javascript origins was localhost:8888 not 888
Just a little addition to Lee's answer: listing both the www.whatever.ext and whatever.ext forms of your URL in JavaScript origins may get rid of the error. That's what did the trick for my app.
I did a stupid thing which took a few minutes to resolve, so I thought I would post a warning in case somebody else falls in this trap.
In the console, when origins are displayed, 'Redirect URIs' come above 'Javascript origins'. When you open the edit pane, it's the other way around, so if you are not paying attention, you could paste your origins in the Redirect URIs field and ....
1: Open the Credentials page for your project.
2:Double-click on your OAuth 2.0 Web client in the client ID list.
3: Make sure that in the web client ID form, change the Authorized JavaScript origins field to http://localhost:8080 when you are running the server locally.
When running remotely add the corresponding appspot server url.
The most common oversight resulting in this error is forgetting to add both HTTP and HTTPS origins on the consent settings in the App Credentials dashboard.
To fix, go to https://console.cloud.google.com/apis/credentials?project=YOUR-APP-ID
Select the OAuth 2.0 client IDs if you had already created one.If not, you will have to create a new client ID for your origin.
Under Authorised JavaScript origins, add both https and http origins for you app if had not added both.
Log out from all google services from your browser.
I same had the problem for google + api sign in.I was getting Error:origin_mismatch and same details were there as they are in the question .. my javascript credentials had http://localhost:4567
but when I run the python file it opened the link as 0.0.0.0:4567 thats basically a localhost but when i changed the url in browser to http://localhost:4567 now the error was removed .. and my application was able to get the OAuth box .. and all went fine!!! this thing removed my error... Please let me know whether I was correct because I just started learning how to use apis
Please check the origin url set in google console for you WEB application/Android
and check the http or https because your site does not work on https (in general site).
You must read the developer guide here
https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide
Good luck !
I had this error trying to use the "Google Play Games Services Management Demo" and it was because of missing "www" in the URL
I fixed it by change JavaScript origins and redirect URIs in google console from http://0.0.0.0:4567 to http://localhost:4567, remember adding /oauth2callback after redirect URIs and change url on browser to http://localhost:4567