...blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

Question

I am not sure why I can view this public API, http://api.snooker.org/?t=10&st=p&s=2020 from my browser and curl. But, when I tried to access it using VueJs Axios, I got the error below:

Access to XMLHttpRequest at 'http://api.snooker.org/?t=10&st=p&s=2020' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my code in VueJs

    <script>
    import axios from "axios";
    
    export default {
      data() {
        return {
          players: [],
          loading: true,
          errored: false
        };
      },
      methods: {
        fetchData() {
          axios
            .get("http://api.snooker.org/?t=10&st=p&s=2020")
            .then(response => (console.log(response.data)))
            .catch(error => {
              console.log(error);
              this.errored = true;
            })
            .finally(() => (this.loading = false));
        }
      },  
      mounted() {
        this.fetchData();
      }
    }
    </script>