sending data as json from ajax to express server causes preflight cors error









up vote
0
down vote

favorite












This question has been asked a gazillion times. I've read the mozilla documentation and looked through so many answers my eyes hurt.



In my ajax call I have this:



 $.ajax({
type: 'POST',
dataType: 'json',
data: name: "test",
contentType: 'application/json',
url: 'https://example.com:8443',
success: function (data)
alert(data);



in my express server my server.js file is this:



app.post('/', function (req, res) 
console.log(req.body.myData);
res.header('Access-Control-Allow-Origin: *');
res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
return res.end('<h1>Hello, Secure World!</h1>');
);


from my understanding I'm properly making the ajax call with dataType: 'json', and contentType 'application/json'.



Also I'm setting acess control allow origin to * which should allow me to have any domain hit my server. I can't figure out what I'm doing wrong. I get this error:



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.


Any help would be appreciated!










share|improve this question

























    up vote
    0
    down vote

    favorite












    This question has been asked a gazillion times. I've read the mozilla documentation and looked through so many answers my eyes hurt.



    In my ajax call I have this:



     $.ajax({
    type: 'POST',
    dataType: 'json',
    data: name: "test",
    contentType: 'application/json',
    url: 'https://example.com:8443',
    success: function (data)
    alert(data);



    in my express server my server.js file is this:



    app.post('/', function (req, res) 
    console.log(req.body.myData);
    res.header('Access-Control-Allow-Origin: *');
    res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
    return res.end('<h1>Hello, Secure World!</h1>');
    );


    from my understanding I'm properly making the ajax call with dataType: 'json', and contentType 'application/json'.



    Also I'm setting acess control allow origin to * which should allow me to have any domain hit my server. I can't figure out what I'm doing wrong. I get this error:



    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.


    Any help would be appreciated!










    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      This question has been asked a gazillion times. I've read the mozilla documentation and looked through so many answers my eyes hurt.



      In my ajax call I have this:



       $.ajax({
      type: 'POST',
      dataType: 'json',
      data: name: "test",
      contentType: 'application/json',
      url: 'https://example.com:8443',
      success: function (data)
      alert(data);



      in my express server my server.js file is this:



      app.post('/', function (req, res) 
      console.log(req.body.myData);
      res.header('Access-Control-Allow-Origin: *');
      res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
      res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      return res.end('<h1>Hello, Secure World!</h1>');
      );


      from my understanding I'm properly making the ajax call with dataType: 'json', and contentType 'application/json'.



      Also I'm setting acess control allow origin to * which should allow me to have any domain hit my server. I can't figure out what I'm doing wrong. I get this error:



      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.


      Any help would be appreciated!










      share|improve this question













      This question has been asked a gazillion times. I've read the mozilla documentation and looked through so many answers my eyes hurt.



      In my ajax call I have this:



       $.ajax({
      type: 'POST',
      dataType: 'json',
      data: name: "test",
      contentType: 'application/json',
      url: 'https://example.com:8443',
      success: function (data)
      alert(data);



      in my express server my server.js file is this:



      app.post('/', function (req, res) 
      console.log(req.body.myData);
      res.header('Access-Control-Allow-Origin: *');
      res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
      res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
      return res.end('<h1>Hello, Secure World!</h1>');
      );


      from my understanding I'm properly making the ajax call with dataType: 'json', and contentType 'application/json'.



      Also I'm setting acess control allow origin to * which should allow me to have any domain hit my server. I can't figure out what I'm doing wrong. I get this error:



      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.


      Any help would be appreciated!







      ajax express






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 9 at 20:39









      FabricioG

      316314




      316314






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          My error was a dumb one. In express js this is incorrect:



          res.header('Access-Control-Allow-Origin: *');
          res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
          res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');


          The settings should actually be like this '','' not ':'



          The correct syntax that worked is this:
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
          res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');


          EDIT: Using * is a security risk but in this case it's one server testing on another both of which I own. When going live I would set * to example.com






          share|improve this answer






















          • setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
            – Pranay Tripathi
            Nov 16 at 21:09











          • Updated @Pranay Tripathi
            – FabricioG
            Nov 16 at 21:16










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232968%2fsending-data-as-json-from-ajax-to-express-server-causes-preflight-cors-error%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote



          accepted










          My error was a dumb one. In express js this is incorrect:



          res.header('Access-Control-Allow-Origin: *');
          res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
          res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');


          The settings should actually be like this '','' not ':'



          The correct syntax that worked is this:
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
          res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');


          EDIT: Using * is a security risk but in this case it's one server testing on another both of which I own. When going live I would set * to example.com






          share|improve this answer






















          • setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
            – Pranay Tripathi
            Nov 16 at 21:09











          • Updated @Pranay Tripathi
            – FabricioG
            Nov 16 at 21:16














          up vote
          0
          down vote



          accepted










          My error was a dumb one. In express js this is incorrect:



          res.header('Access-Control-Allow-Origin: *');
          res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
          res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');


          The settings should actually be like this '','' not ':'



          The correct syntax that worked is this:
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
          res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');


          EDIT: Using * is a security risk but in this case it's one server testing on another both of which I own. When going live I would set * to example.com






          share|improve this answer






















          • setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
            – Pranay Tripathi
            Nov 16 at 21:09











          • Updated @Pranay Tripathi
            – FabricioG
            Nov 16 at 21:16












          up vote
          0
          down vote



          accepted







          up vote
          0
          down vote



          accepted






          My error was a dumb one. In express js this is incorrect:



          res.header('Access-Control-Allow-Origin: *');
          res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
          res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');


          The settings should actually be like this '','' not ':'



          The correct syntax that worked is this:
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
          res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');


          EDIT: Using * is a security risk but in this case it's one server testing on another both of which I own. When going live I would set * to example.com






          share|improve this answer














          My error was a dumb one. In express js this is incorrect:



          res.header('Access-Control-Allow-Origin: *');
          res.header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
          res.header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');


          The settings should actually be like this '','' not ':'



          The correct syntax that worked is this:
          res.header('Access-Control-Allow-Origin', '*');
          res.header('Access-Control-Allow-Methods', 'GET, POST, PUT');
          res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');


          EDIT: Using * is a security risk but in this case it's one server testing on another both of which I own. When going live I would set * to example.com







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 16 at 21:16

























          answered Nov 16 at 21:00









          FabricioG

          316314




          316314











          • setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
            – Pranay Tripathi
            Nov 16 at 21:09











          • Updated @Pranay Tripathi
            – FabricioG
            Nov 16 at 21:16
















          • setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
            – Pranay Tripathi
            Nov 16 at 21:09











          • Updated @Pranay Tripathi
            – FabricioG
            Nov 16 at 21:16















          setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
          – Pranay Tripathi
          Nov 16 at 21:09





          setting ` Access-Control-Allow-Origin: *` is security risk for your app. Consider using npmjs.com/package/cors in order to allow only your trusted origins.
          – Pranay Tripathi
          Nov 16 at 21:09













          Updated @Pranay Tripathi
          – FabricioG
          Nov 16 at 21:16




          Updated @Pranay Tripathi
          – FabricioG
          Nov 16 at 21:16

















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53232968%2fsending-data-as-json-from-ajax-to-express-server-causes-preflight-cors-error%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

          Syphilis

          Darth Vader #20