15

I tried to access this API click here for more info

POST https://api.line.me/v2/oauth/accessToken

but always get the error: 

XMLHttpRequest cannot load https://api.line.me/v2/oauth/accessToken.
No 'Access-Control-Allow-Origin' header is present on the requested resource

Now I want to make sure that domain (and other, example: facebook, twitter, etc...) enable CORS, how I can do that?

Kai
  • 345
  • 1
  • 2
  • 11

1 Answers1

24

A core part of the CORS protocol is the Origin request header that browsers send when handling cross-origin requests initiated from frontend code. So if from a non-browser client/tool you want to emulate a browser-based request, you need to send the Origin header:

curl -i -H 'Origin: http://sample.com' \
  'https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=12345&redirect_uri=https%3A%2F%2Fsample.com%2Fauth&state=123abc'

To examine the response, you also need to tell the client/tool to show you the response headers. In the example above with curl, that’s what the -i option does.

And so finally, to determine whether the server sending the response has CORS enabled in the response, you need to look for the Access-Control-Allow-Origin response header there.

In the case of the https://access.line.me API, the Access-Control-Allow-Origin header won’t be found in the response—which is unsurprising given the docs for its “Web Login flow” https://developers.line.me/web-api/integrating-web-login-v2#steps_web_login:

The LINE Login process for web applications (Web Login) is based on the OAuth 2.0 authorization code grant flow. Your application must be able to make requests server-side and receive data from the LINE Platform.

That is, the docs specifically state a need to make requests from the “server-side”, and nowhere else in those docs is there any mention of support for requests made from frontend JavaScript code running a browser, nor any code examples of how to make a request using JavaScript.

In general, if a particular service/API is CORS-enabled and has docs on how to make requests to that service/API, those docs give examples/details of how to do that from frontend code.

In other words, if docs for a particular service/API don’t give examples/details of how to make requests to it from frontend JavaScript running in a browser, it probably doesn’t support CORS.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • Thank you for the answer. But I'm not understand all of them. I don't know what is "make requests server-side" and "make a request from frontend JavaScript" mean. I use "$http" of angularjs to send a request, what kind of this? – Kai Jul 20 '17 at 06:18
  • 1
    Using angularjs "$http" to send a request is the "make a request from frontend JavaScript" kind. The other kind, "make requests server-side", is if you are, for example, running some Java-based or Python-based or whatever framework on your own server, or running Node.js on the server—that is, on the backend, and you make the requests using some http library from that backend code instead of from your angular "$http" call. – sideshowbarker Jul 20 '17 at 06:42
  • https://stackoverflow.com/questions/32486949/http-header-in-response-exists-with-a-curl-request-but-not-with-browser-request Not sure of what -i does in curl though? As per curl manual it says what you have mentioned. As per the link I shared looks like it make the preflight request in CORS. Please help me understand what it does. – Surya Nov 21 '18 at 05:32
  • This proved to be the solution when I had implemented `django-cors-headers` but the frontend dev was still having issues accessing media/static files of the Django project. Thanks @sideshowbarker – Robert Johnstone Aug 19 '20 at 11:30