REST resources inaccesible, blocked by CORS policy

Bitbucket Development Bitbucket Server
, , ,
1

Hello,

I’m trying to access my BitBucket server plugin’s REST resource from a React UI using axios. The UI is running from a different localhost port via webpack-dev-server (in order to speed up development - no need to constantly atlas-package etc). However, the REST resource is inaccessible:

Access to XMLHttpRequest at ‘http://localhost:7990/bitbucket/rest/myplugin/1.0/config’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

How can this be circumvented?

Thanks!

2

Hi @a.webster, what you could do is try to configure the webpack dev-server to send the extra CORS headers:

// webpack.config.js
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
};

Here is the link to webpack docs

In case you send any additional headers, you will have to extend the above config and add those to the allowed headers:

headers: {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers: some-header, another-header';
}

Thanks,
Maciej Adamczak
Atlassian Developer

3

That did the trick! I’d ended up using a dockerised nginx reverse proxy but this is way simpler!

Thanks!

1 Like