Getting 'has been blocked by CORS policy' while trying to upload file

Question

I was trying to set a ui for uploading excel file using angular8. The front and backend (nodejs) applications are running in two different ports. While clicking upload button i am getting errors.

Have tried adding this code:

app.use(cors());
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
});

still same error

typescript:

url_='http://localhost:3000/product/upload-exel'
    public uploader :FileUploader = new FileUploader({
      url:this.url_
    });

html:

<input type="file"  id="file"
ng2FileSelect [uploader]="uploader"
[(ngModel)]="path">

OPTIONS http://localhost:3000/product/upload-exel 404 (Not Found) Access to XMLHttpRequest at 'http://localhost:3000/product/upload-exel' from origin 'http://localhost:4000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

the error says `The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.`. so can you try removing `*` and adding your client hostname. since you're using `angular` , try `localhost:4200` instead of `*` — kcsujeet, Jul 17 '19 at 07:12
May be you can use a proxy on front side ? https://stackoverflow.com/questions/47536466/cors-issue-with-proxy-conf-json-in-angular-app — Cyril, Jul 17 '19 at 07:35
I have changed to 'Access-Control-Allow-Origin' to server address but still not working same error again. — Amal Raj P, Jul 17 '19 at 08:29

score 1 · Answer 1 · answered Jun 22 '20 at 06:21

My code is deployed on AWS and this thing worked for me:

Besides all the technical things (to be added) which are stated on several other Q/A make sure that your function returns the response to the front-end within 29 seconds. This is the default timeout (and maximum timeout) set for your response. After fixing this I was able to break the CORS error.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The error message indicates that the value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

If your backend server is http://localhost:3000/ and your client frontend is running on http://localhost:4000/, then your backend headers should be:

Backend Server

app.use(cors());
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000/');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, 
OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);

  next();
});

score 0 · Answer 3 · answered Jul 18 '19 at 04:24

In your backend, Since you are using cors module, you can do this and it is safe

var cors = require('cors')
var app = express()

//set options for cors
//add your frontend addresson in the origin 
//for testing add localhost  and port
var corsOptions = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

//for specific endpoint enable cors
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})```

score 0 · Answer 4 · answered Dec 14 '20 at 05:24

This may happen also when using nginx on Mac (homebrew)

If you enable debug error loging you can see this error when uploading - this is what's actually causing the CORS error:

25 open() "/usr/local/var/run/nginx/client_body_temp/0000000001" failed (13: Permission denied)

That may be a bug in the homebrew nginx: https://github.com/denji/homebrew-nginx/issues/124

Not sure if this is the proper fix, but I was able to get it to work this way:

sudo chown YOUR-MACOS-USER /usr/local/var/run/nginx/client_body_temp/

After that restart nginx

Getting 'has been blocked by CORS policy' while trying to upload file

4 Answers4

Backend Server