Making Get request to Yammer API works using Postman tool but not with Vue-Resource

Question

I am trying to integrate Yammer API in my Vue.JS project, for Http calls I am using Vue-Resource plugin. While making GET Http call to get posts from Yammer it gives me following error -

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried postman tool and that gives successful response, but when I try to run the same thing in my Vue.JS project using Vue-Resource plugin it wont work.

The Vue.JS code snippet -

function(){
            this.$http.get("https://www.yammer.com/api/v1/messages/my_feed.json").then((data)=>{
                console.log(data);
            });

In main.vue file i have -

Vue.http.interceptors.push((request, next) => {
  request.headers.set('Authorization', 'Bearer my_yammer_token')
  request.headers.set('Accept', '*/*')
  next()
})

Then I tried the code snippets provided by Postman tool for jquery, that too not working.

jQuery code -

var settings = {
  "url": "https://www.yammer.com/api/v1/messages/my_feed.json",
  "method": "GET",
  "timeout": 0,
  "headers": {
    "Authorization": "Bearer my_yammer_token",
    "Cookie": "yamtrak_id=some_token; _session=some_token"
  },
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

Though, I found similar questions but nothing worked for me. I am working this to resolve from last 2 days but getting failed again and again. Please guide/help me.

score 0 · Answer 1 · answered Feb 19 '21 at 09:54

A browser has higher security requirements than a request in PostMan. In a browser, you are only allowed to make XHR requests to your own current host (combination of domain + port) but not to other remote hosts. To nevertheless make a request to a remote host, you can use the browser built-in CORS. By using this, your browser makes a pre-flight request to the remote host to ask if the current page is allowed to request from that host. This is done via the Access-Control response headers. In your case, this header is probably missing or not allowing your page to access, which is why the request does not go through. Please read further into that topic.

However, in your case, using CORS probably won't be a solution for two reasons: To use CORS, the remote host must present a header which allows every requesting host (*) or your specific one. If you cannot set that setting anywhere on the remote host, it won't work. Second, it is not safe to place your authorization token into client-side JavaScript code. Everybody can just read your JS code and extract the authorization token. For that reason, you usually make the actual API call from the server-side and then pass the data to the client. You can use your own authentication/authorization against your server and then use the static authorization key on the server to request the data from the remote host. In that case, you'll never expose the authorization key to your user. Also, on the server-side, you do not have to deal with CORS as it works just like PostMan or curl as opposed to a browser.

Making Get request to Yammer API works using Postman tool but not with Vue-Resource

1 Answers1