how to add missing CORS header ‘Access-Control-Allow-Origin’?-CodePudding

I want to get a base64 encoded image from another domain. I have enabled CORS on the backend but I am getting an error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<img id="datadiv"></img>

var src = 'https://codedecoder.pythonanywhere.com/media/embed/2021/10/07/temp.jpg'

$.ajax({
  type: "GET",
  url: `https://codedecoder.pythonanywhere.com${src}`,
  crossDomain: true,
  success: function(dayta) {
    console.log(dayta);
    $('#datadiv')[0].src = dayta;
  },
})

CodePudding user response：

You set CORS headers on the server side. It's not a client side problem. But, for development purposes, you can use Chrome's CORS extension. Look it up on the chrome extension store.

CodePudding user response：

For Django, check out the django-cors-headers package:

https://github.com/adamchainz/django-cors-headers

It is maintained by a member of the Django Software Foundation technical team.