Unable to create the right 'Access-Control-Allow-Origin' headers

[omargourari]

Hello everyone, I'm having a hard time allowing CORS requests from Filepond client library to a python/gunicorn backend

Here below the Filepond component:

<file-pond
        accepted-file-types="text/csv"
        allow-multiple="false"
        :server="server"
        name="test"
        ref="pond"/>

import store from '../store'
import vueFilePond from 'vue-filepond';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import 'filepond/dist/filepond.min.css';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginFilePoster);

export default {
  components: {
    FilePond
  },
  data: function() {
    return {
      myFiles: '',
      server: {
        url: 'http://127.0.0.1:8080',
        process: {
            url: '/upload',
            method: 'POST',
            headers: {
              'Access-Control-Allow-Origin':'http://127.0.0.1:8080/upload | *',
              'Content-Type': 'text/csv',
              'Methods':'POST'
            }
        },
        revert: null,
        restore: null,
        load: null,
        fetch: null,
      },
    };
  }
}

Requesting request headers:

Access-Control-Allow-Origin: http://127.0.0.1:8080 | *
Content-Type: text/csv
DNT: 1
Methods: POST
Origin: http://localhost:8080
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

Output error: Access to XMLHttpRequest at 'http://127.0.0.1:5000/upload' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Expected behaviour Requests correctly reach the backend allowing cors requests (and possibly also get rid of the OPTIONS call)

Environment and Version OS MacOS High Siera 10.13.6 Browser Google Chrome Version 70.0.3538.110 (Official Build) (64-bit)

[rikschennink]

The headers property sets request headers. To allow a crossdomain request on your server you have to set the response headers on your server. In PHP this looks like this:

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