6

when trying to $.ajax to fetch some content from other websites in my website, I got the error.

Failed to load https://www.pinterest.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

I knew if the target website didn't allow localhost:8100 to fetch the data, I cannot fetch it in the client side on the web.

However, I found that mobile app (not mobile browser, but android/ios application) does not have the issue, they can simply get the website content by their default mobile built-in HTTP get function.

Do i want to ask why mobile will not encounter CORS issue (mobile can fetch the webcontent simply by the built-in http get function)?

thanks.

SKLTFZ
  • 841
  • 2
  • 10
  • 30
  • CORS is enforced by browsers. The mobile browser you are using may not do that. – ichigolas Oct 18 '17 at 04:49
  • 1
    i am not sure what you are talking about, i want to know why mobile can fetch the content, but web $.ajax can't (web is blocked by CORS not allowed). – SKLTFZ Oct 18 '17 at 04:54
  • You should talk more about which mobile browser is this issue happening on. Add more context. – ichigolas Oct 18 '17 at 04:55
  • 1
    no, i am talking about IOS application, android application and web site application. i am not talking about IOS web browser. – SKLTFZ Oct 18 '17 at 05:01
  • Try this https://stackoverflow.com/questions/45981370/cors-issues-ionic-3/47554997#47554997 – sijo vijayan Nov 29 '17 at 14:21

2 Answers2

7

CORS is enforced by the browser to fulfill the security standard they have to meet. It does not affect requests made programmatically from any language, like a curl call on bash.

This is how CORS works, based on Wikipedia:

  1. The browser sends the OPTIONS request with an Origin HTTP header. The value of this header is the domain that served the parent page. When a page from http://www.example.com attempts to access a user's data in service.example.com, the following request header would be sent to service.example.com: Origin: http://www.example.com.

  2. The server at service.example.com may respond with:

    • An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example Access-Control-Allow-Origin: http://www.example.com
    • An error page if the server does not allow the cross-origin request
    • An Access-Control-Allow-Origin (ACAO) header with a wildcard that allows all domains: Access-Control-Allow-Origin: *

The way CORS works means it is optional. Browsers enforce it to prevent Javascript AJAX calls to perform malicious calls. But other types of consumers built by hand don't need to enforce CORS.

Think in this example:

  • You are the owner of somesite.com
  • Users authenticate to your site using the traditional cookie method

  • User logins into anothersite.com, built by an attacker. This site has the following code:

    <script>fetch('http://somesite.com/posts/1', { method: 'DELETE' });</script>

    ... effectively performing a request to your site and doing bad things.

  • Happily, the browser will perform a preflight request when it sees a cross-domain request, and if your site does not respond saying that requests coming from anothersite.com are OK, you will be covered by default from a potential attack

This is why CORS only makes sense in the context of a browser. Javascript you send to the browser can not (at least easily) circumvent CORS because the only API that allows you to perform requests from the browser is written in stone. Additionally, there are no local storage or cookies outside of the browser.

Corolarium: Enforcing CORS is a deliberate action from the requester, or whoever is making the requests for you, not the sender. Javascript APIs in browsers enforce it. Other languages don't have the need for the reasons explained.

ichigolas
  • 7,595
  • 27
  • 50
  • can you explain why: requesting the webcontent from "https://www.pinterest.com/" (intended to retrieve og:name). web $.ajax failed due to CORS, but native android app and native IOS app with native http get worked (no CORS issue). – SKLTFZ Oct 18 '17 at 05:14
  • i am expecting both 3 platforms would not work if the CORS is not about request client but the target server. but the question is now android and IOS worked, but web is failed. – SKLTFZ Oct 18 '17 at 05:18
  • @nicooga Is there a way CORS or a related protocol can be implemented for mobiles requests or requests made programmatically? – Jude Fernandes Oct 18 '17 at 05:22
  • Of course. That's what the developers of browsers do! – ichigolas Oct 18 '17 at 05:37
  • See my extended explanation – ichigolas Oct 18 '17 at 06:04
  • i knew CORS is able to fix if i create a proxy to fetch the target site first or somehow dont let the target site know your origin. my general question is: why android app and IOS app doesn't contain this issue, but only web. thanks. – SKLTFZ Oct 18 '17 at 06:20
  • It is not an issue. Is a security measure enforced by the browser. Enable CORS on your servers if you need to. – ichigolas Oct 18 '17 at 06:41
  • i dont have access to the "Server". i am just trying to fetch the og:data of pinterest.com. my question is that it works like charm at android and IOS app (not mobile web browser), but it doesn't work on web. i wanna know why only web having this CORS issue :) – SKLTFZ Oct 19 '17 at 03:37
4

When running on a device, your files are served over the file:// protocol, not http://, and your origin will therefore not exist. That's why the request from the native device does not trigger CORS.

henrikmerlander
  • 1,554
  • 13
  • 20