5

I requests s3 server through axios, and I got Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Also, before that, I got OPTIONS https://s3.ap-northeast-2.amazonaws.com/.../... 403 (Forbidden)

I should solve this problem in client-side. I am hosting my files on my local machine. My request codes are below.

axios({
  url: 'https://s3.ap-northeast-2.amazonaws.com/.../...',
  method: 'get',
  withCredentials: true,
  headers: {
    'Content-Type': 'image/jpeg',
    'Access-Control-Allow-Origin': 'http://*, https://*',
  }

})

I tried

  1. start chrome --disable-web-security using git
  2. Installed chrome plugin - Allow-Control-Allow-Origin: *

nothing worked... How can I solve this problem?

Nyeon Kim
  • 137
  • 3
  • 9
  • 1
    You must configure the server at `https://s3.ap-northeast-2.amazonaws.com/…` to send the Access-Control-Allow-Origin header. You have access to that server to do that? If not, then you’ll need to make the request through proxy. For details see the answer at https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707. Doing *start chrome --disable-web-security* or installing a plugin is not a solution to the problem, because all that does it let you alone get around it locally. It doesn’t fix it for users of your app. – sideshowbarker May 12 '17 at 03:36

1 Answers1

4

Access-Control-Allow-Origin is a response header, not a request header. You can't fix this locally, because it's a problem on the other end.

You need CORS (Cross Origin Resource Sharing) enabled and configured on the S3 bucket you are trying to access.

http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Michael - sqlbot
  • 169,571
  • 25
  • 353
  • 427