CORS issues with Chatter API Photo Posting

Question

I have a Chatter Communities API request that creates a new user profile picture. This API callout works when I use an app like Ruby or even a cURL command. However, using an AJAX callout, I get a CORS issue.

I have implemented the CORS functionality as outlined in the Chatter REST docs, but still receive the CORS issue.

Here is my jQuery code:

     $.get('/photo-upload-url', function(params) {
     //assume nothing exploded
     //build the sf request
     $.ajax({
         url: params.url,
         type: 'POST',
         data: data,
         headers: {
             Authorization: 'Bearer ' + params.token

         },
         crossDomain: true,
         processData: false,
         success: function(ret) {
             console.info(data);
             uploading = false;
         }
     });
 });

Answer 1

If you're running into this issue with your local dev server, it could be because Chrome doesn't support localhost for CORS requests (even if whitelisted in CORS settings). For more info on this, please see the related StackOverflow post.

One possible solution for running these API calls on localhost is to implement a simple local proxy. The idea here is that the client-side application in your browser sends requests to localhost instead of Salesforce initially, then the requests are forwarded along to Salesforce.

This works well because ultimately the AJAX call is being made to the same domain that the page originated from.

There are some open source examples of this you could use, such as JSForce Ajax Proxy

Answer 2

CORS is defined for allow to serve Salesforce Content requested from other domain. If you want to change image profile in a community, you can use the profile page.

https://**community_domain/community_name/s/profile/user_id