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

Question

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;
 },
})

• Rory McCrossan: That error means that you have not configured CORS correctly on the server. This is 100% a server-side problem. If CORS is configured correctly, you do not need to make any JS changes.
• RoyalBosS: What about missing headers
• Rory McCrossan: I'm not sure what you mean? If you're referring to the error, it means that the response coming back from the server is missing the necessary CORS headers.
• RoyalBosS: yes. how do i add missing headers and where ?
• Mike Shum: You cannot add them on the frontend

Answer 1

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.

Answer 2

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.