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

Question

Mod note  This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is  This question is not about how to fix a  No  Access-Control-Allow-Origin      error       Please stop posting          CORS configurations for every language framework under the sun  Instead find your relevant language framework s question    3rd party services that allow a request to circumvent CORS   Command line options for turning off CORS for various browsers        I am trying to do authorization using JavaScript by connecting to the RESTful API built-in Flask  However  when I make the request  I get the following error      XMLHttpRequest cannot load http   myApiUrl login  No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  null  is therefore not allowed access    I know that the API or remote resource must set the header  but why did it work when I made the request via the Chrome extension Postman   This is the request code     ajax       type   POST       dataType   text       url  api      username   user       password   pass       crossDomain   true      xhrFields            withCredentials  true               done function  data             console log  done                fail  function xhr  textStatus  errorThrown            alert xhr responseText           alert textStatus

User · Answer

Because    ajax  type   quot POST quot  - calls OPTIONS    post  - Calls POST  Both are different  Postman calls  quot POST quot  properly  but when we call it  it will be  quot OPTIONS quot   For C  web services - Web API Please add the following code in your web config file under  lt system webServer gt  tag  This will work   lt httpProtocol gt       lt customHeaders gt           lt add name  quot Access-Control-Allow-Origin quot  value  quot   quot    gt       lt  customHeaders gt   lt  httpProtocol gt   Please make sure you are not doing any mistake in the Ajax call jQuery   ajax       url   http   mysite microsoft sample xyz com api mycall       headers             Content-Type    application x-www-form-urlencoded             type   quot POST quot      or type  quot GET quot  or type  quot PUT quot         dataType   quot json quot       data               success  function  result            console log result              error  function              console log  quot error quot               Note  If you are looking for downloading content from a third-party website then this will not help you   You can try the following code  but not JavaScript  System Net WebClient wc   new System Net WebClient    string str   wc DownloadString  quot http   mysite microsoft sample xyz com api mycall quot

User · Answer

If you use  NET as your middle tier  check the route attribute clearly  for example   I had issue when it was like this     Route  something  somethingLong  long       Space    Fixed it by this     Route  something  somethingLong long       No space

User · Answer

Applying a CORS restriction is a security feature defined by a server and implemented by a browser       The browser looks at the CORS policy of the server and respects it    However  the Postman tool does not bother about the CORS policy of the server   That is why the CORS error appears in the browser  but not in Postman

User · Answer

Only for  NET Core Web API project  add following changes    Add the following code after the services AddMvc   line in the ConfigureServices   method of the Startup cs file    services AddCors allowsites  gt  allowsites AddPolicy  AllowOrigin   options   gt  options AllowAnyOrigin                        Add the following code after app UseMvc   line in the Configure   method of the Startup cs file    app UseCors options   gt  options AllowAnyOrigin        Open the controller which you want to access outside the domain and add this following attribute at the controller level     EnableCors  AllowOrigin

User · Answer

Encountered the same error in different use case    Use Case  In chrome when tried to call Spring REST end point in angular     Solution  Add  CrossOrigin      annotation on top of respective Controller Class

User · Answer

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript  you can use a proxy server so that it sets the header Access-Control-Allow-Origin to    const express   require  express    const request   require  request     const app   express     app use  req  res  next    gt      res header  Access-Control-Allow-Origin           next         app get   fetch    req  res    gt      request        url  req query url         error  response  body    gt          if  error    response statusCode     200            return res status 500  send  error                  res send body                  const PORT   process env PORT    3000  app listen PORT       gt  console log  listening on   PORT       Above is a sample code  node Js required   which can act as a proxy server  For eg  If I want to fetch https   www google com normally a CORS error is thrown  but now since the request is sent through the proxy server hosted locally at port 3000  the proxy server adds the Access-Control-Allow-Origin header in the response and there wont be any issue  Send a GET request to http   localhost 3000 fetch url Your URL here   instead of directly sending the request to the URl you want to fetch  Your URL here stands for the URL you wish to fetch eg  https   www google com

User · Answer

Are you using Webfonts from Google  Typekit  etc  There are multiple ways you could use Webfonts like  font-face or CSS3 methods  some browsers like Firefox  amp  IE may refuse to embed the font when it   s coming from some non-standard 3rd party URL  like your blog  for same security reason  In order to fix an issue for your WordPress blog  just put below into your  htaccess file   lt IfModule mod headers c gt     lt FilesMatch  quot    ttf ttc otf eot woff woff2 font css css js   quot  gt    Header set Access-Control-Allow-Origin  quot   quot     lt  FilesMatch gt   lt  IfModule gt   Source   https   crunchify com how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn

User · Answer

The error you get is due to the CORS standard  which sets some restrictions on how JavaScript can perform ajax requests  The CORS standard is a client-side standard  implemented in the browser  So it is the browser which prevent the call from completing and generates the error message - not the server  Postman does not implement the CORS restrictions  which is why you don t see the same error when making the same call from Postman

User · Answer

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on  So the browser is blocking it as it usually allows a request in the same origin for security reasons  You need to do something different when you want to do a cross-domain request  A tutorial about how to achieve that is Using CORS   When you are using postman they are not restricted by this policy  Quoted from Cross-Origin XMLHttpRequest      Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers  but they re limited by the same origin policy  Extensions aren t so limited  An extension can talk to remote servers outside of its origin  as long as it first requests cross-origin permissions

User · Answer

In the below investigation as API  I use http   example com instead of http   myApiUrl login from your question  because this first one working   I assume that your page is on http   my-site local 8088   The reason why you see different results is that Postman    set header Host example com  your API  NOT set header Origin   This is similar to browsers  way of sending requests when the site and API has the same domain  browsers also set the header item Referer http   my-site local 8088  however I don t see it in Postman   When Origin header is not set  usually servers allow such requests by default     This is the standard way how Postman sends requests  But a browser sends requests differently when your site and API have different domains  and then CORS occurs and the browser automatically    sets header Host example com  yours as API  sets header Origin http   my-site local 8088  your site     The header Referer has the same value as Origin   And now in Chrome s Console  amp  Networks tab you will see       When you have Host    Origin this is CORS  and when the server detects such a request  it usually blocks it by default   Origin null is set when you open HTML content from a local directory  and it sends a request  The same situation is when you send a request inside an  lt iframe gt   like in the below snippet  but here the Host header is not set at all  - in general  everywhere the HTML specification says opaque origin  you can translate that to Origin null  More information about this you can find here    x000D   x000D  fetch  http   example com api    method   POST     x000D  Look on chrome-console  gt  network tab x000D   x000D   x000D    If you do not use a simple CORS request  usually the browser automatically also sends an OPTIONS request before sending the main request - more information is here  The snippet below shows it    x000D   x000D  fetch  http   example com api     x000D    method   POST   x000D    headers     Content-Type    application json   x000D      x000D  Look in chrome-console - gt  network tab to  api  request  x000D  This is the OPTIONS request  the server does not allow sending a POST request  x000D   x000D   x000D    You can change the configuration of your server to allow CORS requests   Here is an example configuration which turns on CORS on nginx  nginx conf file  - be very careful with setting always   http origin  for nginx and     for Apache - this will unblock CORS from any domain    x000D   x000D  location     index  php        x000D         x000D      add header  Access-Control-Allow-Origin    http origin  always  x000D      add header  Access-Control-Allow-Credentials   true  always  x000D      if   request method   OPTIONS    x000D          add header  Access-Control-Allow-Origin    http origin     DO NOT remove THIS LINES  doubled with outside  if  above  x000D          add header  Access-Control-Allow-Credentials   true   x000D          add header  Access-Control-Max-Age  1728000    cache preflight value for 20 days x000D          add header  Access-Control-Allow-Methods   GET  POST  OPTIONS   x000D          add header  Access-Control-Allow-Headers   My-First-Header My-Second-Header Authorization Content-Type Accept Origin   x000D          add header  Content-Length  0  x000D          add header  Content-Type   text plain charset UTF-8   x000D          return 204  x000D        x000D    x000D   x000D   x000D    Here is an example configuration which turns on CORS on Apache   htaccess file    x000D   x000D    ------------------------------------------------------------------------------ x000D      Cross-domain Ajax requests                                                   x000D    ------------------------------------------------------------------------------ x000D   x000D    Enable cross-origin Ajax requests  x000D    http   code google com p html5security wiki CrossOriginRequestSecurity x000D    http   enable-cors org  x000D   x000D     lt IfModule mod headers c gt  x000D       Header set Access-Control-Allow-Origin     x000D     lt  IfModule gt  x000D   x000D    Header set Header set Access-Control-Allow-Origin     x000D    Header always set Access-Control-Allow-Credentials  true  x000D   x000D  Access-Control-Allow-Origin  http   your-page com 80  x000D  Header always set Access-Control-Allow-Methods  POST  GET  OPTIONS  DELETE  PUT  x000D  Header always set Access-Control-Allow-Headers  My-First-Header My-Second-Header Authorization  content-type  csrf-token  x000D   x000D   x000D

User · Answer

WARNING  Using Access-Control-Allow-Origin    can make your API website vulnerable to cross-site request forgery  CSRF  attacks  Make certain you understand the risks before using this code    It s very simple to solve if you are using PHP  Just add the following script in the beginning of your PHP page which handles the request    lt  php header  Access-Control-Allow-Origin         gt    If you are using Node-red you have to allow CORS in the node-red settings js file by un-commenting the following lines      The following property can be used to configure cross-origin resource sharing    in the HTTP nodes     See https   github com troygoode node-cors configuration-options for    details on its contents  The following is a basic permissive set of options  httpNodeCors     origin        methods   GET PUT POST DELETE       If you are using Flask same as the question  you have first to install flask-cors    pip install -U flask-cors   Then include the Flask cors in your application   from flask cors import CORS   A simple application will look like   from flask import Flask from flask cors import CORS  app   Flask   name    CORS app    app route      def helloWorld      return  Hello  cross-origin-world     For more details  you can check the Flask documentation

[javascript] Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

jQuery

Examples related to javascript

Examples related to jquery

Examples related to cors

Examples related to same-origin-policy

Examples related to flask-restless