Cross- origin request

Question

I want to Upload Image in backened from frontend....I'll use ngFileUploader bower Component. My frontend code is:

function SampleController(SampleData,Upload,$http) {
      var vm = this;
      vm.uploadFiles = function(files, errFiles) {
        Upload.upload({
      url: "localhost:5000/upload", //webAPI exposed to upload the file
      data: {
        file: files
      }
    }).then(function(resp) {
      console.log(resp)});
    }

And i'll added ngf-select in its html file. And it will show the error-- XMLHttpRequest cannot load localhost:5000/upload. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. How can I resolved it??

The front of the URL was omitted. Voting to close as a typo. — Quentin, Jan 30 '17 at 12:59
it will again give the error-- POST http://localhost:3000/upload 404 (Not Found) — raksha, Jan 30 '17 at 13:16
So you are running at 3000 and uploading to port 5000? That is a cross domain call. You would need to add CORs header. — epascarello, Jan 30 '17 at 13:23
i have already added cors header... but it will give again the same error.... — raksha, Jan 31 '17 at 06:21

score 0 · Answer 1 · answered Jan 30 '17 at 13:01

0

you need to add this:

header('Access-Control-Allow-Headers: Content-Type');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Origin: *');

My project backend is laravel. So, I included this in Route file.

answered Jan 30 '17 at 13:01

Mohammed

648
2
12
32

my backened is in expressJS. so whether i need to include these header files – raksha Jan 30 '17 at 13:17
visit this : http://stackoverflow.com/questions/11181546/how-to-enable-cross-origin-resource-sharing-cors-in-the-express-js-framework-o – Mohammed Jan 30 '17 at 13:19

score 0 · Answer 2 · answered Jan 30 '17 at 13:22

0

Add cors filter to your application as a middleware

var app = require('express')();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', ['GET', 'PUT', 'POST', 'DELETE']);
  next();
});

I would recommend you white list the origins you would allow.

answered Jan 30 '17 at 13:22

R. Gulbrandsen

3,648
1
22
35

No.. Its not working... again give the same error of post – raksha Jan 31 '17 at 06:27
Confirm, your server is runing on :3000 and client on :5000? if so, the url in the client has to be http://localhost:3000/upload – R. Gulbrandsen Jan 31 '17 at 08:18
if your accessing a different domain, make sure to add http:// to the url – R. Gulbrandsen Feb 01 '17 at 10:34

Cross- origin request

2 Answers2

Linked