CODEWITHSUNDEEP
reactjsapinginxaxioscors
nanocinho
nanocinho

Reputation: 21

Cross Origin Reques blocked

I'm trying to load images from an orthanc server with ReactJS. As orthanc doesn't support CORS I've set up a proxy server with nginx. Nginx and orthanc are in docker containers, and nginx can talk to orthanc via http://orthanc:8042. Following my nginx config file:

events {
    worker_connections 1024;
}
http {
   server {
      listen 80 default;
      server_name 127.0.0.1 localhost;
   
      location  /orthanc/  {
         proxy_pass http://orthanc:8042;
         proxy_set_header HOST $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

         rewrite /orthanc(.*) $1 break;
         add_header Access-Control-Allow-Credentials 'true';
         add_header Access-Control-Allow-Origin '*';
         add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
         add_header Access-Control-Allow-Headers 'Authorization, Origin, X-Requested-With, Content-Type, Accept'; 
          
      }
   }
}

If I try the request with postman the CORS headers from nginx seem to work:

Postman response header

But if I try to call the api via ReactJS / axios I'm getting blocked by the CORS policies:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8085/orthanc/instances/5cd65944-8a37c5f3-ecd23660-3238d171-41728b44/preview. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8085/orthanc/instances/5cd65944-8a37c5f3-ecd23660-3238d171-41728b44/preview. (Reason: CORS request did not succeed).

And here is my request:

import axios from 'axios'
export const PacsService = {
    find,
    authToken,
}
function  find() {
    authToken()
    var response = instance.get('http://localhost:8085/orthanc/instances/5cd65944-8a37c5f3-ecd23660-3238d171-41728b44/preview')
    console.log(response.data)

     
}

// -- Axios https://github.com/axios/axios#config-defaults
const instance =  axios.create({
    //baseURL: `${config.ORTHANC_BASE_URL}`,
    headers: {
        'Content-Type': 'application/json'
    }
})

instance.interceptors.request.use(request => {
    console.log('Starting Request', JSON.stringify(request, null, 2))
    return request
})

instance.interceptors.response.use(response => {
    console.log('Response:', JSON.stringify(response, null, 2))
    console.log(response)
    return response
    
})

// -- Helper functions
export function authToken() {
    // set default header to be sent with every request
    instance.defaults.headers.common.Authorization = `Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXX`
}

Upvotes: 1

Views: 1190

Answers (1)

Stephan Häberle
Stephan Häberle

Reputation: 390

When calling with Postman you only send a GET request. Browsers always send a OPTIONS request first to check the CORS rules.

You simply forward every request to the orthanc Server with your nginx rules. But orthanc does not support OPTIONS requests and will send you an error response - for example error 404. When this happens, the browser blocks your requests due to CORS errors. You should be able to recreate this error with Postman by sending a OPTIONS request instead of a GET request to your orthanc URL.

As a workaround you can configure the nginx to return code 200 OK everytime a OPTIONS request is sent to your orthanc server. The response must also include the Access-Control-Allow headers to let the Browsers know that CORS is allowed. In your case this would look something like this:

      location  /orthanc/  {
         # always return code 200 with needed CORS headers
         if ($request_method = OPTIONS ) {
            add_header Content-Type text/plain;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Origin' '*' always;
            return 200;
         }

         proxy_pass http://orthanc:8042;
         rewrite /orthanc(.*) $1 break;
         add_header 'Access-Control-Allow-Origin' '*';
      }

the always Tag at the end of the headers is needed because otherwise it wouldn't return this headers as orthanc does not reply with a 200 OK response

Upvotes: 1

Related Questions