+ Start a Discussion
Kshitij LawateKshitij Lawate 

CORS Issue while connecting to Salesforce from JavaScript (both from simple HTML and Visualforce)

We have a requirement where we need to connect to salesforce from an intranet website with code written in JavaScript. We have the ConnectedApp created in Salesforce and we are following Username-Password OAuth2 flow. We are passing all the required parameters given below. We are POSTing this to the request URL given below.

var requestUrl = 'https://login.salesforce.com/services/oauth2/token';
requestUrl += '?username=USERNAME&password=PASSWORD_SECURITY_TOKEN&grant_type=password&client_id=CLIENT_ID_FROM_CONNECTED_APP&client_secret=AGAIN_FROM_CONNECTED_APP;
We tried connecting using JQuery AJAX call and JSforce libraries. We have also whitelisted the required domain in Salesforce via Setup --> Security Controls --> CORS.

We tried connecting to salesforce via the intranet site as well as another salesforce org using the same code. for both of the situations we are getting below error. 

User-added image

In case if image does not load 
XMLHttpRequest cannot load https://login.salesforce.com/services/oauth2/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://lightningcheck-dev-ed--c.ap2.visual.force.com' is therefore not allowed access.

The origin is there in the Request Header as checked in Browser Console, however, the 'Access-Control-Allow-Origin' parameter is not there in response header from Salesforce.

Am I missing any setting here or it is not something Salesforce currently supports? Any help appreciated, thanks.
Kshitij LawateKshitij Lawate
In addition to above details, few more details below.

1] We do get an entry in Login History of salesforce with Connected App's name.
2] The reponse from Salesforce is blocked because of CORS issue.
3] From broswer console we determined that the 'Access-Control-Allow-Origin' parameter is not there in Salesforce reponse.
This CORS issue is troubling many. I remember doing something with remote site settings. Not very sure but can you try adding your own domain, in this case "https://lightningcheck-dev-ed--c.ap2.visual.force.com", in Remote Site Settings. It would make it an allowed domain to serve request.

Another issue can be related to the Critical Update "Serve Static Resources from force.com domain", but I think this won't impact API calls. You can try to deactivate this update and check - incase you have installed this. - https://success.salesforce.com/issues_view?id=a1p300000008XRLAA2
Kshitij LawateKshitij Lawate
@TechAddict: Thanks for you reply.

I have already added the url to remote site settings of my source org. But it does not work. 
Also, I tried deactivating that critical update, but that one also won't work. 
Which API are you calling, Kshitij? Does this situation apply to you?:

Can we hack CORS support for custom APEX Rest services (without a proxy)? (http://salesforce.stackexchange.com/questions/45724/can-we-hack-cors-support-for-custom-apex-rest-services-without-a-proxy" target="_blank)
Steve Rogers 9Steve Rogers 9
Hello Kshitij,
we could help you for this project remotely. we have a very good and experienced team of SFDC Developers who can be deployed for your project. Please let me know if there is any scope of outsourcing the project.. Please drop an email us to learn our expertise at steve.r@saxonglobal.com
Kshitij LawateKshitij Lawate
Thank you for your reply. We are planning to call REST API to connect to Salesforce. However, we are stuck at authorization only. We are using OAuth2 Username and Password flow. THe URL we are hitting is for OAUth2 only. 
We have not developed any custom Apex Rest Services.

@Steve Rogers 9
I am afraid, this is not the solution we are looking for. 
@Kshitij: Can you share some details:-
  1. Can you confirm where is your external application being hosted?
  2. Have you looked into ForceTK (https://github.com/developerforce/Force.com-JavaScript-REST-Toolkit)?
  3. As per error, it seems that the request is being made from a VF page (https://lightningcheck-dev-ed--c.ap2.visual.force.com). If that's the case, you can also explore using remotefunctions / lightning SDK / Javascript libraries.
Kshitij LawateKshitij Lawate
@AnshulVerma: Thanks for your reply. Please find below my comments.
1] The external application is hosted on an intranet website. It has access to Internet. We also tried to test the same code via a Salesforce Org. using visualforce page. In both cases the Origin is sent accross in request. The origin is also whitelisted under CORS option in Salesforce.

Also, we do get Login History in both cases (Intranet website and Different SFDC Org) with Connected Apps name and result as Success. I think, the response which is sent back from Salesforce is not whitelisting the origin and hence browser is blocking the same. 

2] I have not yet tried with ForceTK framework, but I do have tried with Jquery and JSforce libraries. The result is same in both cases.

3] Yes as mentioned in point 1 above, we tried with Intranet website and visualforce page. However, the VF page is created in a separate org. In short, we tried to connect 2 different Salesforce orgs using REST API. That is why we are going for Username-Password approach. 

In addition, the above does work when we implement it using Apex Controller of same VF page. However, our Intranet website is on a older platform which allows only HTML and Javascript as customization. 

Please let me know if you need any more information. 
@Kshitij: Another option that I can think of is using Canvas SDK. It has built in cross domain proxies which can help resolve this issue. Refer https://developer.salesforce.com/docs/atlas.en-us.198.0.platform_connect.meta/platform_connect/canvas_app_xhr_intro.htm 
Kshitij LawateKshitij Lawate
@AnshulVerma: Thanks for your reply. I'll try with the Canvas Apps. 
Kshitij LawateKshitij Lawate
We didn't try with Canvas Apps. Instead we created a custom apex rest service and exposed it to public site. Here is the blog post (https://developer.salesforce.com/blogs/developer-relations/2012/02/quick-tip-public-restful-web-services-on-force-com-sites.html" target="_blank) with example about how to do that. As this was custom apex rest service, we were able to modify the response as required. Hence, in the custom code we added parameter 'access-control-allow-origin' in the response. 
As our goal was to insert a record in the system and send back success or error result, the public apex rest service worked for us. 
Rajeesh V R 1Rajeesh V R 1
@Kshitij Lawate, 

How do you create access token in the custom apex class? is there any method available so that we can pass all the required parameters and get the access token and instance url. 
Kshitij LawateKshitij Lawate
We did not do any authentication with custom apex approach. We made the URL for service public by making use of Public sites.