We Keep Coding

CORS header ‘Access-Control-Allow-Origin’ missing when making a request to different port on localhost

I have a node web server (express) running on port 6000.
When http://localhost:6000/ is invoked, index.html is served to the client which has a script, logic.js that runs:
var xhr = new XMLHttpRequest();
var url = 'http://localhost:4000/endpoint';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('endpoint');
callback(xhr.responseText);
}
};
xhr.send(JSON.stringify({'key': 'value'}));
There is another express server running on port 4000.
The server sets up an endpoint which simply returns what the request body submitted:
app.route('/segment')
.post(bodyParser.json(), function(req, res) {
res.set('Access-Control-Allow-Origin', '*');
res.send(req.body);
});
When I access http://localhost:6000/, I'm seeing this in the browser console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4100/segment. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
Is there a way to bypass this during prototyping?

Your endpoint probably doesn't serve the OPTIONS HTTP method which is used by browsers to check CORS headers (before they make the real request).
If you need different CORS headers in development and in production, I think the best way is to add a new backend config option with the value for allowed origins and serve them from some global response filter.

You have set xhr.setRequestHeader('Content-type', 'application/json'); so this is a preflighted request (rule of thumb: A Content-Type that is not a valid value for the enctype attribute of an HTML form will trigger a preflighted request).
Your server side code only sets the Access-Control-Allow-Origin header in response to POST requests. You need to write server side code to respond to the preflight OPTIONS request too.

Here are a few ways to solve this problem:
Best: CORS header (requires server changes)
CORS (Cross-Origin Resource Sharing) is a way for the server to say “I will accept your request, even though you came from a different origin.” This requires cooperation from the server – so if you can’t modify the server (e.g. if you’re using an external API), this approach won’t work.
Modify the server to add the header Access-Control-Allow-Origin: * to enable cross-origin requests from anywhere (or specify a domain instead of *). This should solve your problem.
2nd choice: Proxy Server
If you can’t modify the server, you can run your own proxy. And this proxy can return the Access-Control-Allow-Origin header if it’s not at the Same Origin as your page.
Instead of sending API requests to some remote server, you’ll make requests to your proxy, which will forward them to the remote server. Here are a few proxy options.
3rd choice: JSONP (requires server support)
If CORS and the proxy server don’t work for you, JSONP may help. You essentially make a GET request with a callback parameter:
(get) http://api.example.com/endpoint?callback=foo
The server will wrap the JSON reply in a function call to your callback, where you can handle it:
foo({"your": "json", here: true})
There are some downsides, notably that JSONP only supports GET requests and that you still need a cooperative server.

Api Gateway cannot allow Access-Control-Allow-Origin

This url is in AWS API Gateway with method get and stage is well deployed.
And I enabled CORS following the aws document.
Here are my steps to enable CORS.
-Resource->action->enable CORS->
default setting ->enable CORS and replacing the CORS headers.
There is no error log in CORS result.
I am not a profesional web developer and my browser is safari.
Here is my code to query "http://my.com"
function request(idex) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", "http://my.com", true);
xmlHttp.send(null);}
The console print the error :
XMLHttpRequest cannot load "http://my.com" Origin http://example.com is not allowed by Access-Control-Allow-Origin.
If there are some mistakes in javascript request or in API Gateway deploy?

After consulting and trying each method, I found the error as following.
According to AWS document, we can not deploy our api before enabling CORS. All the settings about the header and CORS must be set before being deployed.
But the API Gateway does not block this setting nor does it show any error dialog. API Gateway will not change the header even if your setting process shows success.

The cross origin problem is from server side not javascript side. When the server does not allow request from other domains it throws cross origin error. But you said you already added CORS in aws instance
As the javascript is only accessing the service from my.com, You need to added proper domain mapping in your my.com site to tell that request will come from another domain called example.com. might be the server is not properly configured. or try if server is expecting any header.
try to see the result in any rest client like soapui, rect client plugin in chrome, etc. once you confirm that there is no problem in server, try it from javascript
To test there is a chrome plugin you can try
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Implementing an API rest client using Javascript returns 404 when adding the authorization header

I am trying to implement a simple recurly API client to create an account in recurly using a local HTML page for testing purposes.
I am hard-coding the request in Javascript and using XMLHttpRequest to do the post operation.
var client = new XMLHttpRequest();
client.open("POST", "https://subdomain.recurly.com/v2/accounts", true);
client.setRequestHeader("Authorization", "Basic " + "API Key");
client.send([XML Request Here]);
The code is returning 404.
But if I comment out
client.setRequestHeader("Authorization", "Basic " + "API Key");
The code is returning 401 (unauthorized), which means that the endpoint exists but there is a problem with setting the Authorization header.
Edit:I have checked the method for the 404 request and it is OPTIONS instead of POST, is that due to the same origin policy?
Any help is appreciated.
Thank you.

POST requests with certain content types should not be generating the pre-flight requests. Set this one:
application/x-www-form-urlencoded
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Send POST data using XMLHttpRequest

Why sending a POST by AJAX is interpreted by the HTTP Server as OPTIONS and sending by CURL is effectively a PUT?

I'm testing a HTTP Server that I have developed myself with C++ and Boost libraries. More specifically, I'm testing an endpoint where a JSON is received by PUT.
To test the RESTFul webservice I use Curl with the following command:
curl -H "Content-Type: application/json" -H "Content-Length: 34" -H "Connection: close" -X PUT --data "#response_json" http://localhost:8080/answer
where response_json is a file with the json to be sent. This works fine, the server receives the request as a PUT and do what is supposed to do.
However, when I test the webservice from AJAX with this:
function sendPut2() {
var http = new XMLHttpRequest();
var url = 'http://localhost:8080/answer';
var data = JSON.stringify({"question": "a", "answer": "b"});
http.open("PUT", url, true);
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("Content-Length", data.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(data);
}
the server receives it as OPTIONS and does not work. Moreover, in Firebug console I can see: "NetworkError: 404 Not Found - http://localhost:8080/answer".
I have tried with Firefox and Chrome. What is wrong in my javascript code?
This is the Firebug with the request from Javascript:

The browser has a same origin policy for security reasons. When you request a Ajax PUT in the browser from a different origin than the current web page was loaded from, then the request is subject to that same origin policy. The destination site can choose to support CORS (cross origin resource sharing) which is a specific scheme that the browser implements that lets it ask the target site if a specific cross origin request is OK or not.
Using the OPTIONS request before the PUT request is one such part of the CORS scheme. If the browser detects certain conditions on the original cross origin request, then it will first issue an OPTIONS request and, if it gets the right response from that, then it will issue the target request (a PUT in your case). Things that can trigger the browser to use the OPTIONS request are things like custom headers, certain types of authorization required, certain content types, certain types of requests, etc...
CURL, on the other hand, enforces no such same origin security (that is someting a browser invented for its own web page security model) so it just sends the PUT request right through without requiring the correct answer from the OPTIONS request first.
FYI, if the Javascript in the browser that is making the Ajax request is requesting from the same origin as the loaded web page that contains the Javascript, then it should not trigger the OPTIONS request because it would be a same origin request rather than a cross origin request. If you have a local server, make sure that the web page is being loaded from the local server (same hostname and port number) too, not from the file system and not one using an IP address and the other using localhost or something like that. As far as the browser is concerned, the hostname has to physically be the same, not just the same IP address.
Here's info from MDN on what requests are "preflighted" with the OPTIONS request:
Preflighted requests
Unlike simple requests (discussed above), "preflighted" requests first
send an HTTP request by the OPTIONS method to the resource on the
other domain, in order to determine whether the actual request is safe
to send. Cross-site requests are preflighted like this since they may
have implications to user data. In particular, a request is
preflighted if:
It uses methods other than GET, HEAD or POST. Also, if POST is used
to send request data with a Content-Type other than
application/x-www-form-urlencoded, multipart/form-data, or text/plain,
e.g. if the POST request sends an XML payload to the server using
application/xml or text/xml, then the request is preflighted. It sets
custom headers in the request (e.g. the request uses a header such as
X-PINGOTHER)
FYI, here's a pretty good explanation of the various aspects of CORS. Because your request is a PUT, it will be in the "not-so-simple request" part of that article.

Javascript CORS GET request blocked or invalid

I'm struggling for quite some time already with issuing a simple GET request to a 3rd party REST Api. I've read a bit of tutorials and SO questions but I just can't get it to work. I am getting one of two errors
Response for preflight is invalid (redirect)
or (if via https)
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8433' is therefore not allowed access.
About 2nd message: Is it just a problem with the server not supporting CORS?
My code:
var xmlHttp = new XMLHttpRequest();
var url = 'https://inspirehep.net/record/451647?of=recjson&ot=recid,number_of_citations,authors,title'; //http or https, tried both
/*
doing sth with response here like populate dropdown etc.
*/
xmlHttp.open('GET', url, true);
xmlHttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type, X-Requested-With, Cache-Control");
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", '*');
xmlHttp.setRequestHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
xmlHttp.setRequestHeader("Access-Control-Allow-Credentials", "true");
xmlHttp.send();
Whole app is running on node.js server (localhost) and the script above is included as separate file in .html view.
I can correctly get json response from web-browser, fiddler, postman etc. for this API. I also tried different APIs (e.g. Openweather API) thinking that it's the problem with server configuration, but the result was the same.
I would be thankful for any help - maybe i'm just misunderstanding something about CORS.

you cannot set headers from the browser, if the target url runs on your server or a server that you manage and that server runs nodejs you can use cors https://www.npmjs.com/package/cors, however, if this is a third party url and it doesn't not allow CORS, then you should make the request from the your back-end through configuring a proxy from your server to third party server, that should resolve your problem.

The answer on CORS with nodejs is most likely right, but I want to suggest that you run a test to make sure your code works fine as well.
Try with Chrome and download an extension to allow CORS. This way you will test the functionality first before trying the right solution.

Late to the party...
http://cors-anywhere.herokuapp.com/ is great, but you don't need it if you are using XMLHttpRequest() and a GET method. Simply exclude your header requests...
var xhr = new XMLHttpRequest();
xhr.open( "GET", YOURURL );
//OMIT THESE...
//xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
//xhr.withCredentials = true;
//xhr.setRequestHeader( 'Content-Type', _contenttype );
//xhr.setRequestHeader( 'CrossDomain', 'true' );
//....
xhr.addEventListener( 'load', function () {
xhr.responseJSON = JSON.parse( xhr.responseText );
alert( xhr.responseJSON);
});
xhr.onerror = function(e) {
alert("Ajax request error");
};
xhr.send( JSON.stringify({}) );