search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.6k stars 3.7k forks source link

Is there anyway to set 'Access-Control-Allow-Origin' header in the response on ckeditor5 for simpleupload? #7809

Closed phongyewtong closed 4 years ago

phongyewtong commented 4 years ago

I got this error below, Is there anyway to set 'Access-Control-Allow-Origin' header in the response on ckeditor5 simpleupload plugin? it works on postman but not my website on localhost. I not sure what i am doing wrong here?

Error on client

Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/bucketName.appspot.com/o/images' from origin 'http://localhost:3000' 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.

Client code

simpleUpload: {
    // The URL that the images are uploaded to.
    uploadUrl: 'https://firebasestorage.googleapis.com/v0/b/bucketName.appspot.com/o/images',

    // Enable the XMLHttpRequest.withCredentials property.
    withCredentials: true,

    // Headers sent along with the XMLHttpRequest to the upload server.
    headers: {
        'X-CSRF-TOKEN': 'CSFR-Token',
        'Authorization': 'Bearer ' + token
    },

Server firebase: cors.json

[
  {
    "origin": [
        "http://localhost.com:3000"
    ],
    "method": ["GET","HEAD", "POST", "PUT", "OPTIONS"],
    "maxAgeSeconds": 3600,
    "responseHeader": ["Content-Type", "Authorization", "X-CSRF-TOKEN"]
  }
]

Ran this on google cloud terminal

gsutil cors set cors.json gs://myservername.appspot.com

package.json

{
  "name": "tws-dashboard",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://www.google.com/",
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "availity-reactstrap-validation": "^2.6.0",
    "bootstrap": "^4.3.1",
    "chalk": "^2.4.1",
    "chart.js": "^2.8.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "rc-time-picker": "^3.7.3",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-chartjs": "^1.2.0",
    "react-chartjs-2": "^2.7.6",
    "react-countup": "^4.2.0",
    "react-data-grid": "^6.1.0",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.8.6",
    "react-dropzone": "^10.2.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-feather": "^2.0.3",
    "react-fontawesome": "^1.6.1",
    "react-google-charts": "^3.0.14",
    "react-images-upload": "^1.2.7",
    "react-redux": "^7.1.0",
    "react-responsive-modal": "^4.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-scroll-4": "^1.0.0-beta.2",
    "react-scripts": "^3.0.1",
    "react-select": "^3.1.0",
    "react-slick": "^0.24.0",
    "react-smart-data-table": "^0.7.1",
    "react-spinners": "^0.9.0",
    "react-star-rating-component": "^1.4.1",
    "react-switch": "^5.0.1",
    "react-table-6": "^6.11.0",
    "react-tabs": "^3.0.0",
    "react-toastify": "^5.3.2",
    "reactstrap": "^8.0.1",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/plugin-transform-react-jsx-self": "^7.10.4",
    "@ckeditor/ckeditor5-alignment": "^21.0.0",
    "@ckeditor/ckeditor5-autoformat": "^21.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
    "@ckeditor/ckeditor5-block-quote": "^21.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^23.1.1",
    "@ckeditor/ckeditor5-editor-classic": "^21.0.0",
    "@ckeditor/ckeditor5-essentials": "^21.0.0",
    "@ckeditor/ckeditor5-heading": "^21.0.0",
    "@ckeditor/ckeditor5-image": "^21.0.0",
    "@ckeditor/ckeditor5-indent": "^21.0.0",
    "@ckeditor/ckeditor5-link": "^21.0.0",
    "@ckeditor/ckeditor5-list": "^21.0.0",
    "@ckeditor/ckeditor5-media-embed": "^21.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^21.0.0",
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@ckeditor/ckeditor5-table": "^21.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
    "@ckeditor/ckeditor5-typing": "^21.0.0",
    "@ckeditor/ckeditor5-upload": "^21.0.0",
    "Faker": "^0.7.2",
    "raw-loader": "^3.1.0"
  }
}

might be a similar issue: https://stackoverflow.com/questions/42803394/cors-credentials-mode-is-include

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

phongyewtong commented 4 years ago

solve it by

simpleUpload: {
    // The URL that the images are uploaded to.
    uploadUrl: 'https://firebasestorage.googleapis.com/v0/b/bucketName.appspot.com/o/images',

    // Enable the XMLHttpRequest.withCredentials property.
    withCredentials: false,

    // Headers sent along with the XMLHttpRequest to the upload server.
    headers: {
        'Authorization': 'Bearer ' + token
    },
raudipra commented 4 years ago

Hi @phongyewtong I am new to this javascript build module and I somehow managed to build my own version of ckeditor classic build with many custom plugins. I have a question with this simple uploader, as what already seen from your code, you use token as your auth and you put it as a variable 'token'. How do you pass this token variable if we have to build the module first before the runtime (supposedly you got the token during the runtime after login or smth)?