Javascript cross-origin Resource Access

Javascript cross-origin Resource Access
APIS developed by Django can be accessed normally in the browser, but GET access in javascript reports the following error:
No 'access-Control-Allow-origin' header is present on the requested resource.

I checked it out. In fact, the problem is still not too small. Let's analyze it below.

 

First, you must know that the browser specifies a "Same-Origin Policy ). The so-called same source means that the domain name, protocol, and port are the same. Client scripts (JS) of different sources cannot read or write resources of the other party without explicit authorization. This is a famous security policy proposed by Netscape. all browsers that can run javascript comply with this policy [1].
That is to say, a script can only send HTTP requests to the site where it is loaded. A script may not be able to GET the resources that the browser can access directly in the address bar of the browser. For example, through this URL (http://tb2.bdstatic.com/tb/static-spage/widget/member_rank/member_rank_z_a0f387f.pnG), you can access a picture of Baidu. You can access this image using a browser or in the src of the HTML image element. But if you use JS for GET, an error will be reported.

Note that this policy is a browser policy. If it is used in other scripts not running in the browser, such as python, it can still GET the image Baidu.

 

This policy is A security policy without which cookie hijacking occurs (Site A obtains Site B's cookie. But this policy is so dead that site A's JS cannot call APIs developed by site B, so the API will be useless. If one site cannot access the resources of another site, how much redundant Internet resources are!

 

Therefore, in order not to allow us to develop APIs in white, CORS (cross-origin Resource Sharing) occurs ). CORS is A mechanism. As long as the server complies with this mechanism, the scripts of Site A can access resources of site B, the Baidu image above can be obtained by our local JS script.
The CORS mechanism stipulates that the server should add Access-Control-Allow-Origin and Access-Control-Allow-Methods to the HTTP header to restrict other sites and Methods that can Access resources. Let's take a look at the first error, that is, the server has not configured Access-Control-Allow-Origin.
Add the site addresses that support CORS to the source server Access-Control-Allow-Origin. Then, the site's JS can Access the resources on the source server.

Return to Django and use Django's middleware to provide a simpler method to meet the CORS mechanism. For details, see here.

1. in the following directory of the Django Project (manage. pip install django-cors-headers2. in settings. configure CORS_ORIGIN_ALLOW_ALL in py to allow all sites to access the resource INSTALLED_APPS = (... 'corsheaders ',...) MIDDLEWARE_CLASSES = (... 'corsheaders. middleware. corsMiddleware, 'django. middleware. common. commonMiddleware ',...) CORS_ORIGIN_ALLOW_ALL = True

All sites are open to Access resources. In the HTTP header, Access-Control-Allow-Origin is set *. It is not safe to allow all sites to access resources. For example, if a hacker writes an infinite GET code to access resources, the server may be paralyzed. Therefore, you can also set a whitelist:

CORS_ORIGIN_WHITELIST = (        'localhost:8083',        'hostname.example.com'    )