Getting No 'Access-Control-Allow-Origin' header issue while open file viewer

[lakshmisanthi]

Hi, I am new to react-file-viewer. I want to show view some images and documents in my application. so I have installed the react-file-viewer package. here is my sample code

import React, { Component } from 'react'; import {Container, Modal,Button} from 'semantic-ui-react'; import FileViewer from 'react-file-viewer';

const file = 'https://storage.googleapis.com/dwellingg-dev-site-image/default_images/home.jpg' const type = 'jpg'

export default class Hello extends Component {

constructor(props) { 
super(props);
this.state ={ 
  showModal:false,
}   

} onError(e) { console.log(e, 'error in file-viewer'); } render() { return (
<Container> <Button onClick={()=>{this.setState({showModal:true})}}>View</Button> <Modal open={this.state.showModal} basic size='large' onClose={()=>{this.setState({showModal:false})}}> <Modal.Content> <FileViewer fileType={type} filePath={file}/> </Modal.Content> </Modal> </Container>
); } };

I getting below error.

Access to Image at 'https://storage.googleapis.com/dwellingg-dev-site-image/default_images/home.jpg' from origin 'http://192.168.1.4:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.4:3000' is therefore not allowed access.

Thanks in advance

[akhilaudable]

+1

[YakimchykNadzeya]

+1

[paul-altyfc]

I am having the same CORS issue. Can somebody please provide an update or a workaround for this issue please?

Issue is only with jpg files the viewer will render a pdf document from the same location

[iequivocality]

+1

[leewenjie]

+1

Otherwise, the server hosted image file loads in a simple <img src={}/> but not <FileViewer/>

[msilucifer]

I am having same issue now. What does mean of "+1"? Is this a solution? Please help me.

[msilucifer]

Thanks, @yangchih But in my thought, it is not a good solution to change the file in node_modules folder. Do you have any other ideas?

[hxtruong6]

Thanks, @yangchih But in my thought, it is not a good solution to change the file in node_modules folder. Do you have any other ideas?

Although I add new line to code, it doesn't work :(

[anasyo10]

Any updates on this issue? Or any other package you guys could recommend?

[geekl1]

I also have the same problem when I try to load a file from an external server.

[visisemanaj]

Is this problem resolved? It doesn't still work for me. Or should I don't use this library?

[geekl1]

Is this problem resolved? It doesn't still work for me. Or should I don't use this library?

finally i switched to something else since its not working.

[AlwaniAnis]

Is this problem resolved? It doesn't still work for me. Or should I don't use this library?

finally i switched to something else since its not working.

what did you use now ?

[emiliobasualdo]

@geekl1 @AlwaniAnis have you found an alternative or solution? Regards!

[Iamsdt]

If you are using gcloud storage then try to setup cors there

1. install gcloud SDK
2. Create json file (cors.json)

[
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

3. Now config

gsutil cors set cors.json gs://BUCKET_NAME

check official docs

[tariq3372]

still struggling by this

[BossBele]

If you are using gcloud storage then try to setup cors there

1. install gcloud SDK
2. Create json file (cors.json)

[
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

3. Now config

gsutil cors set cors.json gs://BUCKET_NAME

check official docs

https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin