REST API Post request on single HTML page [duplicate] - javascript

This question already has answers here:
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
(11 answers)
Closed 2 years ago.
I am trying to submit a post request using an endpoint URL. I am sending the content-type as application/json and two header values for username and password. When I try to access it via Postman, I get 200 response code along with tokenId and successUrl but when the same is being done via the below JavaScript code, I get 401. The same is working when I try to get is done via JSP and Java. Me, not being a Javascript expert, am unable to figure out the reason. I read the CORS articles and am not sure why cross-domain is not a problem with Java/JSP code but occurs for JavaScript.
Below is the code:
<!DOCTYPE html>
<html>
<body>
<h2>REST</h2>
<button type="button" onclick="myFunc()">Request data</button>
<p id="demo"></p>
<script>
function myFunc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "Endpoint URL entered here", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("X-OpenAM-Username", "username entered here");
xhttp.setRequestHeader("X-OpenAM-Password", "password entered here");
xhttp.send();
}
</script>
</body>
</html>
The error that comes on Chrome browser is as below:
Access to XMLHttpRequest at 'Endpoint URL' from origin 'null' 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.
a.html:23 POST 'Endpoint URL' net::ERR_FAILED
EDIT1:
The error that comes on Firefox browser is as below:
XHROPTIONS 'Endpoint URL'
[HTTP/1.1 401 Unauthorized 2025ms]
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 'Endpoint URL'. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 'Endpoint URL'. (Reason: CORS request did not succeed).
Please let me know what exactly am I doing wrong.

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As part of CORS, your browser will send what’s called a 'preflight request' to the server to see if it will accept your request. It’s checking for a few things— in this case, the server didn’t reply to the preflight with the 'Acess-Control-Allow-Origin' header, so your browser knows the request you’re trying to send will fail and blocks it from being sent.
This doesn’t happen outside of the browser environment— Postman doesn’t care if the server will respond with the appropriate headers or not.
If you have access to the server, you’ll need to configure a CORS policy that allows requests from your specific origin (website). Happy to help if you can provide a little more info about your set up.

Related

Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error while the header is given

I'm trying to get informations from a SystemLinkServlet.
So I tried to execute this JavaScript code from a Nintex Forms (Sharepoint) :
var http = new XMLHttpRequest();
var url = 'www.exampleservlet.com';
var params = "anyxml"
http.open('POST', url, true)
http.setRequestHeader('Content-type', 'application/xml');
http.setRequestHeader('Access-Control-Allow-Origin', '*');
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
};
http.send(params);
But I still got this error in my console :
Access to XMLHttpRequest at 'www.exampleservlet.com' from origin 'www.exampleorigin.com' 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.
It seems that the header is ignored or maybe I can't set multiple request headers?
It works on Postman.
Update
So It worked with an extension but apparently, I can't set headers with JavaScript code in my Nintex Forms.
I'm trying to find to pass those headers without using an extension.
If you are using PHP, try adding the following code at the beginning of the php file:
If you are using localhost, try this:
header("Access-Control-Allow-Origin: *");
If you are using external domains such as server, try this:
header("Access-Control-Allow-Origin: http://www.webiste.com");
Also you I suggest you to use this extension:
https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=en
Postman or other similar tools provide you development environments. In this way, you can ignore and pass CORS rule while sending request and getting response by changing tool settings. But if you sending request via browser(chrome, firefox etc.), browsers always add some preflight controls.
For example, browser send options message to get server side rule before your http request. So that invalid or wrong requests are blocked by browser before processing your http request.
In your case, server side must include your domain information. You can not change this communication rule from client side by adding just "Access-Control-Allow-Origin: *" or "Access-Control-Allow-Origin: http://www.webiste.com" statements.

Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control [duplicate]

This question already has answers here:
How does the 'Access-Control-Allow-Origin' header work?
(19 answers)
Closed 2 years ago.
I am executing below code but i am getting the error. How to fix it..It i working fine in POSTMAN..in chrome it is throwing error
jscallout.html:1 Access to XMLHttpRequest at 'https://api.getresponse.com/v3/contacts' from origin 'null' 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.
JS -
<script>
const request = new XMLHttpRequest();
request.open("GET","https://api.getresponse.com/v3/contacts");
request.setRequestHeader("X-Auth-Token","api-key 1234567890");
request.setRequestHeader('Access-Control-Allow-Origin','*');
request.setRequestHeader('Access-Control-Allow-Methods','GET');
request.setRequestHeader('Access-Control-Allow-Headers','X-Auth-Token,Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
request.send();
request.onload = ()=>{
console.log(request);
if(request.status == 200) {
console.log(JSON.parse(request.response));
}
}
</script>
I guess it would require configuring server side, CORS is enabled at server side and accepting request from certain whitelisted url.

Dailymotion JS API - No 'Access-Control-Allow-Origin' header is present on the requested resource

I'm currently trying to retrieve videos from a private Dailymotion channel in my personal application.
To do that I'm trying to authenticate to the Dailymotion API using the grant_type method : password.
Here is my POST request :
xhr.open('POST', 'https://api.dailymotion.com/oauth/token', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.onload = function(e) {
console.log("HEADERS", e.target.getAllResponseHeaders())
if (e.target.status < 400) {
console.log(e);
} else {
console.log("error")
}
};
xhr.onerror = function(e) {
console.log("HEADERS", e.target.getAllResponseHeaders())
};
xhr.send('grant_type=password&client_id=<MyAPIKey>&client_secret=<MyAPISecret>&username=<MyUserName>&password=<MyPassword>');
I'm receiving the following error : No 'Access-Control-Allow-Origin' header is present on the requested resource.
I checked the response header and the Access-Control-Allow-Origin is missing. I cannot add this parameter on the API server because I'm requesting Dailymotion servers...
So my question is : Is it possible to configure the Dailymotion application (referenced by my API Key) to accept my request from my private domain, or is there a way to bypass the 'Access-Control-Allow-Origin' problem.
Thanks in advance !
It is not possible to by-pass Access-Control-Allow-Origin in common browsers.
Maybe Dailymotion allows only specific domains, or simply disallows localhost
Since the Access-Control-Allow-Origin header (and all the other CORS headers) are response headers, you can't control them.
Is this code running in a browser? If so, confirm that the Origin request header is being sent. If it is not running in a browser, try adding the Origin request header with your request and see if that causes the server to include the CORS response headers.
If that doesn't work, then you can't do anything without possibly using their SDK.

CORS error in JS (XMLRequest)

I’m trying to communicate a web page with a RestAPI server. When I try to do an http request the following message appears:
XMLHttpRequest cannot load https://(MyUrl). 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.
xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); //Some line in my web page code
response.setRequestHeader("Access-Control-Allow-Origin", "*"); //Some line in my APIRest code
I have been doing some research about CORS and I don't understand which headers I have to include to the http request and what headers I have to include in the server to enable it. Should I add something in some .config?
For what I have understood, my petition is a “not-simple” request, as it’s a multipart request with an application/json part that also sends a token into the header. It’s a POST request.
Thanks!
It does not help that you set the headers in the client side. The server needs to have that header present in order to allow requests from third parties.
And so this will not work for you as long as the server does not have the Access-Control-Allow-Origin header set to allow your requests.
You can read more about CORS here.

GET JSON with XMLHttpRequest

I have a python script which generates a JSON and I can see it in http://192.168.1.171:17000/
In the Network tab I get
200 GET / 192.168.1.171:17000 json transfereed 40KB
When I'm trying to GET it from another webpage with javascript
var url = "http://192.168.1.171:17000";
var Httpreq = new XMLHttpRequest();
function Get(url){
Httpreq.open("GET", url, false);
//Httpreq.setRequestHeader( 'Access-Control-Allow-Origin', '*');
Httpreq.send(null);
return Httpreq.responseText;
}
var json_obj = JSON.parse(Get(url));
console.log("data: "+json_obj);
in the network tab I get
200 GET / 192.168.1.171:17000 json transfereed 0KB
it's Response tab
SyntaxError:
JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
and in the console
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.171:17000/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
NS_ERROR_FAILURE:
When I add
Httpreq.setRequestHeader( 'Access-Control-Allow-Origin', '*');
instead of fixing the problem I'm getting one more error
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.171:17000/. (Reason: CORS request failed).
When I visit http://192.168.1.171:17000/ I'm getting my json, which is valid, and when I run my javascript code with another json it runs. But when I run my javascript code with my json it doesn't run. Could you please help me to understand what I'm doing wrong here?
That header needs to be added to the server's response, not the client's request. In other words, you need to modify your Python app to return the Access-Control-Allow-Origin header. (How exactly you do that depends on what you're using on the Python side.)

Categories