0

Now I'm sending a GET request to an external host using Vue.js and getting the notorious error:

Failed to load EXTERNAL_SERVICE_JSON_OBJECT_URL: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

My source code looks like:

Vue.$http
  .get(EXTERNAL_SERVER_JSON_OBJECT_URL)
  .then(response => {
    ...
    });
    ...
  });

Just to check if I can get the json object by entering the EXTERNAL_SERVER_JSON_OBJECT_URL in Chrome address bar, I tried and get the object without any error.

So I opened developer tool and compared HTTP GET request headers.

When I run my VueJS script above, the request header looks like:

Caution Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

But when I send the request via Chrome address bar, the request header looks like:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Host: HOST_NAME (<-- blacked on purpose)
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

By comparing these two headers, I guess the 'Origin' or 'Referer' field in Vue HTTP GET request might cause the Cross-Origin error, and therefore, I need to manipulate the header field in the script.

I wonder if this guess is correct, and otherwise, I want to know which front-end-side solutions I can try. There I could find many questions about this cross-origin error, but it's very hard to find the right answer which fits to my context..

Heesuk C. Son
  • 11
  • 1
  • @AliaksandrSushkevich Thx, I'll take a look and get back! – Heesuk C. Son Jun 28 '18 at 10:02
  • @AliaksandrSushkevich I've looked through the thread, but I couldn't find any vue.js-specific answers. I'll take more time to read through, but it'd be better if I can get an answer which fits to my context. – Heesuk C. Son Jun 28 '18 at 10:18
  • And I found a comment in the linked question saying an 'access header' need to be setup, so I wonder if someone knows how to do that in vue.js – Heesuk C. Son Jun 28 '18 at 10:24
  • This setup should be done on the backend. – Aliaksandr Sushkevich Jun 28 '18 at 10:31
  • @AliaksandrSushkevich Yes, I found many comments talking about proxy, and I agree with it. But I just wonder if it can be accomplished in front-end side. I didn't test it yet, but found fetch API (https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api) and the web site tells us the API supports CORS. If you look at a post, https://www.reddit.com/r/vuejs/comments/6norx2/cors_issues_when_calling_api/, the very last comment says fetch() method works. So I wanted to know if there is any way like this in vue.js – Heesuk C. Son Jun 28 '18 at 10:39
  • If you add `cors` header to fetch, yes, it may work, but it won't work properly because this way status of your response won't be ok. I'm not sure how Vue.$http is implemented but you can try to test your request with fetch. – Aliaksandr Sushkevich Jun 28 '18 at 10:52

0 Answers0