No Access-Control-Allow-Origin - Node Apache Port Issue

Question

i ve created a small API using Node Express and trying to pull data using Angularjs but as my html page is running under apache on localhost 8888 and node API is listen on port 3000  i am getting the No  Access-Control-Allow-Origin   I tried using  node-http-proxy and Vhosts Apache but not having much succes  please see full error and code below       XMLHttpRequest cannot load localhost 3000  No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  localhost 8888  is therefore not allowed access            Api Using Node Express     var express   require  express    var app   express    var contractors                    id    1             name    Joe Blogg            Weeks   3           Photo    1 png            app use express bodyParser      app get      function req  res      res json contractors       app listen process env PORT    3000   console log  Server is running on Port 3000     Angular code  angular module  contractorsApp        controller  ContractorsCtrl   function  scope   http  routeParams         http get  localhost 3000   then function response           var data   response data          scope contractors   data          HTML   lt body ng-app  contractorsApp  gt       lt div ng-controller  ContractorsCtrl  gt            lt ul gt               lt li ng-repeat  person in contractors  gt   person name   lt  li gt           lt  ul gt       lt  div gt   lt  body gt

User · Answer

x000D   x000D      x000D     Allow cross origin to access our  public directory from any site  x000D     Make sure this header option is defined before defining of static path to  public directory x000D      x000D  expressApp use   public  function req  res  next    x000D      res setHeader  Access-Control-Allow-Origin         x000D         Request headers you wish to allow x000D      res setHeader  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept    x000D         Set to true if you need the website to include cookies in the requests sent x000D      res setHeader  Access-Control-Allow-Credentials   true   x000D         Pass to next layer of middleware x000D      next    x000D      x000D   x000D   x000D      x000D     Server is about set up  Now track for css js images request from the  x000D     browser directly  Send static resources from    public  directory   x000D      x000D  expressApp use   public   express static path join   dirname   public      x000D  If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following  x000D   x000D   x000D

User · Answer

Hi this happens when the front end and backend is running on different ports  The browser blocks the responses from the backend due to the absence on CORS headers  The solution is to make add the CORS headers in the backend request  The easiest way is to use cors npm package   var express   require  express   var cors   require  cors   var app   express   app use cors      This will enable CORS headers in all your request  For more information you can refer to cors documentation  https   www npmjs com package cors

User · Answer

The answer code allow only to localhost 8888  This code can t be deployed to the production  or different server and port name    To get it working for all sources  use this instead      Add headers app use function  req  res  next            Website you wish to allow to connect     res setHeader  Access-Control-Allow-Origin                 Request methods you wish to allow     res setHeader  Access-Control-Allow-Methods    GET  POST  OPTIONS  PUT  PATCH  DELETE            Request headers you wish to allow     res setHeader  Access-Control-Allow-Headers    X-Requested-With content-type            Set to true if you need the website to include cookies in the requests sent        to the API  e g  in case you use sessions      res setHeader  Access-Control-Allow-Credentials   true           Pass to next layer of middleware     next

User · Answer

Try adding the following middleware to your NodeJS Express app  I have added some comments for your convenience       Add headers app use function  req  res  next            Website you wish to allow to connect     res setHeader  Access-Control-Allow-Origin    http   localhost 8888            Request methods you wish to allow     res setHeader  Access-Control-Allow-Methods    GET  POST  OPTIONS  PUT  PATCH  DELETE            Request headers you wish to allow     res setHeader  Access-Control-Allow-Headers    X-Requested-With content-type            Set to true if you need the website to include cookies in the requests sent        to the API  e g  in case you use sessions      res setHeader  Access-Control-Allow-Credentials   true           Pass to next layer of middleware     next          Hope that helps

User · Answer

Accepted answer is fine  in case you prefer something shorter  you may use a plugin called cors available for Express js  It s simple to use  for this particular case   var cors   require  cors        use it before all route definitions app use cors  origin   http   localhost 8888

User · Answer

All the other answers didn t work for me   including cors package  or setting headers through middleware  For socket io 3  this worked without any extra packages  const express   require  express    const app   express     const server   require  http   createServer app   const io   require  socket io   server        cors            origin   quot   quot           methods    quot GET quot    quot POST quot

User · Answer

Install cors dependency in your project    npm i --save cors   Add to your server configuration file the following   var cors   require  cors    app use cors       It works for me with 2 8 4 cors version

User · Answer

Another way  is simply add the headers to your route   router get      function req  res        res setHeader  Access-Control-Allow-Origin             res setHeader  Access-Control-Allow-Methods    GET  POST  OPTIONS  PUT  PATCH  DELETE       If needed     res setHeader  Access-Control-Allow-Headers    X-Requested-With content-type       If needed     res setHeader  Access-Control-Allow-Credentials   true      If needed      res send  cors problem fixed

User · Answer

Add following code in app js of NODEJ Restful api to avoid  Access-Control-Allow-Origin  error in angular 6 or any other framework  var express   require  express    var app   express     var cors   require  cors    var bodyParser   require  body-parser       enables cors app use cors      allowedHeaders     sessionId    Content-Type       exposedHeaders     sessionId       origin           methods    GET HEAD PUT PATCH POST DELETE      preflightContinue   false

User · Answer

Apart from all listed answers  I had the same error I have both access to frontend and backend  I already added cors module app use cors     Still  I was struggling with this error  After some debugging  I found the issue  When I upload a media which size was more than 1 MB then the error was thrown by Nginx server  lt html gt    lt head gt       lt title gt 413 Request Entity Too Large lt  title gt   lt  head gt    lt body gt       lt center gt           lt h1 gt 413 Request Entity Too Large lt  h1 gt       lt  center gt       lt hr gt       lt center gt nginx 1 18 0 lt  center gt   lt  body gt    lt  html gt   But in the console of frontend  I found the error Access to XMLHttpRequest at  https   api yourbackend com  from origin  https   web yourfromntend com  has been blocked by CORS policy  No  Access-Control-Allow-Origin  header is present on the requested resource   So It makes confusion here  But the route cause of this error was from nginx configuration  It s just because the directive client max body size value has been set to 0 by default  It determines what the allowable HTTP request size can be is client max body size  This directive may already be defined in your nginx conf file located at  etc nginx nginx conf Now you need to add edit the value of the directive client max body size either at http or server  server       client max body size 100M             Once you have set your desired value  save your changes and reload Nginx  service nginx reload After these changes  It s working well REFERENCE  https   www keycdn com support 413-request-entity-too-large    text  23 processed 20by 20the 20web 20server  amp text An 20example 20request 2C 20that 20may e g  20a 20large 20media 20file

User · Answer

The top answer worked fine for me  except that I needed to whitelist more than one domain     Also  top answer suffers from the fact that OPTIONS request isn t handled by middleware and you don t get it automatically   I store whitelisted domains as allowed origins in Express configuration and put the correct domain according to origin header since Access-Control-Allow-Origin doesn t allow specifying more than one domain     Here s what I ended up with   var     require  underscore     function allowCrossDomain req  res  next      res setHeader  Access-Control-Allow-Methods    GET  POST  OPTIONS       var origin   req headers origin    if    contains app get  allowed origins    origin         res setHeader  Access-Control-Allow-Origin   origin          if  req method      OPTIONS         res send 200       else       next           app configure function        app use express logger       app use express bodyParser       app use allowCrossDomain

User · Answer

app all      function req  res next                   Response settings         type  Object              var responseSettings              AccessControlAllowOrigin   req headers origin           AccessControlAllowHeaders    Content-Type X-CSRF-Token  X-Requested-With  Accept  Accept-Version  Content-Length  Content-MD5   Date  X-Api-Version  X-File-Name            AccessControlAllowMethods    POST  GET  PUT  DELETE  OPTIONS            AccessControlAllowCredentials   true                        Headers             res header  Access-Control-Allow-Credentials   responseSettings AccessControlAllowCredentials       res header  Access-Control-Allow-Origin    responseSettings AccessControlAllowOrigin       res header  Access-Control-Allow-Headers    req headers  access-control-request-headers      req headers  access-control-request-headers      x-requested-with        res header  Access-Control-Allow-Methods    req headers  access-control-request-method      req headers  access-control-request-method     responseSettings AccessControlAllowMethods        if   OPTIONS     req method            res send 200             else           next

User · Answer

You can use   http jsonp   OR  Below is the work around for chrome for local testing  You need to open your chrome with following command   Press window R   Chrome exe --allow-file-access-from-files   Note   Your chrome must not be open  When you run this command chrome will open automatically   If you are entering this command in command prompt then select your chrome installation directory then use this command   Below script code for open chrome in MAC with  --allow-file-access-from-files   set chromePath to POSIX path of   Applications Google Chrome app Contents MacOS Google Chrome   set switch to   --allow-file-access-from-files  do shell script  quoted form of chromePath   amp  switch  amp     gt   dev null 2 gt  amp 1  amp     second options  You can just use open 1  to add the flags  open -a  Google Chrome  --args --allow-file-access-from-files

User · Answer

This worked for me   app get      function  req  res         res header  Access-Control-Allow-Origin             res send  hello world        You can change   to fit your needs  Hope this can help

[node.js] No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

Examples related to node.js

Examples related to angularjs

Examples related to rest

Examples related to express

Examples related to cors