Origin http localhost is not allowed by Access-Control-Allow-Origin

Question

I m trying to do a fetch from backbone js to my node js server  However  I get the following error in the console   Origin http   localhost is not allowed by Access-Control-Allow-Origin   I added the following to my node js server   var allowCrossDomain   function req  res  next        res header  Access-Control-Allow-Origin    http   localhost        res header  Access-Control-Allow-Methods    GET PUT POST DELETE        res header  Access-Control-Allow-Headers    Content-Type        app configure function         app use allowCrossDomain         But it s still returning the same error  However  even if this did work  it doesn t seem like the ideal solution  as I would like users from all over to be able to send requests

User · Answer

This approach resolved my issue to allow multiple domain    app use function req  res  next          var allowedOrigins     http   127 0 0 1 8020    http   localhost 8020    http   127 0 0 1 9000    http   localhost 9000          var origin   req headers origin        if allowedOrigins indexOf origin   gt  -1              res setHeader  Access-Control-Allow-Origin   origin                   res header  Access-Control-Allow-Origin    http   127 0 0 1 8020          res header  Access-Control-Allow-Methods    GET  OPTIONS          res header  Access-Control-Allow-Headers    Content-Type  Authorization          res header  Access-Control-Allow-Credentials   true         return next

User · Answer

a thorough reading of jQuery AJAX cross domain seems to indicate that the server you are querying is returning a header string that prohibits cross-domain json requests   Check the headers of the response you are receiving to see if the  Access-Control-Allow-Origin header is set  and whether its value restricts cross-domain requests to the local host

User · Answer

You ve got two ways to go forward   JSONP    If this API supports JSONP  the easiest way to fix this issue is to add  amp callback to the end of the URL  You can also try  amp callback   If that doesn t work  it means the API does not support JSONP  so you must try the other solution   Proxy Script    You can create a proxy script on the same domain as your website in order to avoid the cross-origin issues  This will only work with HTTP URLs  not HTTPS URLs  but it shouldn t be too difficult to modify if you need that    lt  php    File Name  proxy php if   isset   GET  url           die       Don t do anything if we don t have a URL to work with    url   urldecode   GET  url      url    http       str replace  http           url      Avoid accessing the file system echo file get contents  url      You should probably use cURL  The concept is the same though   Then you just call this script with jQuery  Be sure to urlencode the URL     ajax       url         proxy php url http 3A 2F 2Fapi master18 tiket com 2Fsearch 2Fautocomplete 2Fhotel 3Fq 3Dmah 26token 3D90d2fad44172390b11527557e6250e50 26secretkey 3D83e2f0484edbd2ad6fc9888c1e30ea44 26output 3Djson       type        GET       dataType    json     done function data        console log data results result 1  category      Do whatever you want here       The Why    You re getting this error because of XMLHttpRequest same origin policy  which basically boils down to a restriction of ajax requests to URLs with a different port  domain or protocol  This restriction is in place to prevent cross-site scripting  XSS  attacks   More Information  Our solutions by pass these problems in different ways   JSONP uses the ability to point script tags at JSON  wrapped in a javascript function  in order to receive the JSON  The JSONP page is interpreted as javascript  and executed  The JSON is passed to your specified function   The proxy script works by tricking the browser  as you re actually requesting a page on the same origin as your page  The actual cross-origin requests happen server-side

User · Answer

There are 2 calls that need to set the correct headers   Initially there is a preflight check so you need something like     app get   item   item list   app options   item   item preflight     and then have the following functions     exports list   function  req  res    Items allItems function  err  items                    res header  Access-Control-Allow-Origin                TODO - Make this more secure           res header  Access-Control-Allow-Methods    GET PUT POST            res header  Access-Control-Allow-Headers    Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept            res send items                      and for the pre-flight checks  exports preflight   function  req  res    Items allItems function  err  items            res header  Access-Control-Allow-Origin                TODO - Make this more secure           res header  Access-Control-Allow-Methods    GET PUT POST            res header  Access-Control-Allow-Headers    Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept            res send 200                   You can consolidate the res header   code into a single function if you want   Also as stated above  be careful of using      res header  Access-Control-Allow-Origin         this means anyone can access your site

User · Answer

If you are making the fetch call to your localhost which I m guessing is run by node js in the same directory as your backbone code  than it will most likely be on http   localhost 3000 or something like that  Than this should be your model   var model   Backbone Model extend       url    item        And in your node js you now have to accept that call like this   app get   item   function req  res       res send  some info here

User · Answer

I fixed this  for development  with a simple nginx proxy        etc nginx sites-enabled default server     listen 80    root  path to Development dir    index index html       from your example   location  search       proxy pass http   api master18 tiket com

User · Answer

By localhost you have to use the null origin  I recommend you to create a list of allowed hosts and check the request s Host header  If it is contained by the list  then by localhost send back an   res header  Access-Control-Allow-Origin    null      by any other domain an  res header  Access-Control-Allow-Origin   hostSentByTheRequestHeader     If it is not contained by the list  then send back the servers host name  so the browser will hide the response by those requests   This is much more secure  because by allow origin   and allow credentials everybody will be capable of for example stealing profile data of a logged in user  etc     So to summarize something like this   if  reqHost in allowedHosts      if  reqHost     http   localhost           res header  Access-Control-Allow-Origin    null        else         res header  Access-Control-Allow-Origin   reqHost   else     res header  Access-Control-Allow-Origin   serverHost     is the most secure solution if you want to allow multiple other domains to access your page   I guess you can figure out how the get the host request header and the server host by node js

User · Answer

If you want everyone to be able to access the Node app  then try using   res header  Access-Control-Allow-Origin          That will allow requests from any origin  The CORS enable site has a lot of information on the different Access-Control-Allow headers and how to use them   I you are using Chrome  please look at this bug bug regarding localhost and Access-Control-Allow-Origin  There is another StackOverflow question here that details the issue

[javascript] Origin http://localhost is not allowed by Access-Control-Allow-Origin

Examples related to javascript

Examples related to node.js

Examples related to backbone.js

Examples related to cors