Deadly CORS when http localhost is the origin

Question

I am stuck with this CORS problem  even though I set the server  nginx node js  with the appropriate headers   I can see in Chrome Network pane -  Response Headers   Access-Control-Allow-Origin http   localhost   which should do the trick   Here s the code that I now use to test   var xhr   new XMLHttpRequest    xhr onload   function        console log  xhr loaded       xhr open  GET    http   stackoverflow com     xhr send      I get     XMLHttpRequest cannot load http   stackoverflow com   Origin http   localhost is not allowed by Access-Control-Allow-Origin    I suspect it s a problem in the client script and not server configuration

User · Answer

I decided not to touch headers and make a redirect on the server side instead and it woks like a charm.

The example below is for the current version of Angular (currently 9) and probably any other framework using webpacks DevServer. But I think the same principle will work on other backends.

So I use the following configuration in the file proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

In case of Angular I serve with that configuration:

$ ng serve -o --proxy-config=proxy.conf.json

I prefer to use the proxy in the serve command, but you may also put this configuration to angular.json like this:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

See also:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy

User · Answer

The real problem is that if we set -Allow- for all request  OPTIONS  amp  POST   Chrome will cancel it  The following code works for me with POST to LocalHost with Chrome   lt  php if  isset   SERVER  HTTP ORIGIN             header  Access-Control-Allow-Origin     SERVER  HTTP ORIGIN           header  Access-Control-Allow-Origin           header  Access-Control-Allow-Credentials  true            header  Access-Control-Allow-Methods  GET  POST  OPTIONS          if    SERVER  REQUEST METHOD       OPTIONS         if  isset   SERVER  HTTP ACCESS CONTROL REQUEST METHOD             header  Access-Control-Allow-Methods  GET  POST  OPTIONS                 if  isset   SERVER  HTTP ACCESS CONTROL REQUEST HEADERS             header  Access-Control-Allow-Headers    SERVER  HTTP ACCESS CONTROL REQUEST HEADERS            exit 0        gt

User · Answer

Chrome does not support localhost for CORS requests  a bug opened in 2010  marked WontFix in 2014    To get around this you can use a domain like lvh me  which points at 127 0 0 1 just like localhost  or start chrome with the --disable-web-security flag  assuming you re just testing

User · Answer

Agreed  CORS should be enabled on the server-side to resolve the issue ground up  However    For me the case was  I desperately wanted to test my front-end React Angular VUE  code locally with the REST API provided by the client with no access to the server config  Just for testing After trying all the steps above that didn t work  I was forced to disable web security and site isolation trials on chrome along with specifying the user data directory tried skipping this  didn t work   For Windows cd C  Program Files Google Chrome Application  Disable web security and site isolation trials chrome exe  --disable-site-isolation-trials --disable-web-security --user-data-dir  quot PATH TO PROJECT DIRECTORY quot   This finally worked  Hope this helps

User · Answer

Chrome will make requests with CORS from a localhost origin just fine   This isn t a problem with Chrome   The reason you can t load http   stackoverflow com is that the Access-Control-Allow-Origin headers weren t allowing your localhost origin

User · Answer

Per  Beau s answer  Chrome does not support localhost CORS requests  and there is unlikely any change in this direction    I use the Allow-Control-Allow-Origin    Chrome Extension to go around this issue  The extension will add the necessary HTTP Headers for CORS   Access-Control-Allow-Origin    Access-Control-Allow-Methods   GET  PUT  POST  DELETE  HEAD  OPTIONS  Access-Control-Expose-Headers   lt you can add values here gt    The source code is published on Github    Note that the extension filter all URLs by default  This may break some websites  for example  Dropbox   I have changed it to filter only localhost URLs with the following URL  filter      localhost

User · Answer

The solution is to install an extension that lifts the block that Chrome does  for example  Access Control-Allow-Origin - Unblock  https   add0n com access-control html version 0 1 5 amp type install

User · Answer

Quick and dirty Chrome extension fix   Moesif Orign  amp  CORS Changer  However  Chrome does support cross-origin requests from localhost  Make sure to add a header for Access-Control-Allow-Origin for localhost

User · Answer

I think my solution to this might be the simplest  On my development machine  I added a fake domain in my hosts file similar to http   myfakedomain notarealtld and set it to 127 0 0 1  Then I changed my server s CORS configuration  in my case an S3 bucket  to allow that domain  That way I can use Chrome on localhost and it works great  Make sure your CORS configuration takes into account the entire hostname with port  ie  http   myfakedomain notarealtld 3000 You can modify your hosts file easily on Linux  Mac  and Windows

User · Answer

None of the extensions worked for me  so I installed a simple local proxy  In my case https   www npmjs com package local-cors-proxy  It is a 2-minute setup    from their site    npm install -g local-cors-proxy       API endpoint that we want to request that has CORS issues    https   www yourdomain ie movies list      Start Proxy  lcp --proxyUrl https   www yourdomain ie      Then in your client code  new API endpoint    http   localhost 8010 proxy movies list   Worked like a charm for me  your app calls the proxy  who calls the server  Zero CORS problems

[javascript] Deadly CORS when http://localhost is the origin

Examples related to javascript

Examples related to html

Examples related to cors

Examples related to xmlhttprequest

Examples related to xmlhttprequest-level2