Front-end cross-domain access

• 1. JSONP
• 2. CORS (cross-origin resource sharing)
  • 2.1 Operating mode
  • 2.2 jquery supports Cors
  • 2.3 Compared to JSONP
• 3. Cross-domain access in the application of reviews
• References

In the Internet application:

• A page needs to request a Web service-side interface under multiple domain names
• At the same time a Web service interface may be requested by a number of pages under different domain names.

It is not advantageous for a Web application to support multiple domain names in order to support the above pattern, because the domain name application and management resources are relatively large, so the service side support cross-domain becomes a more reasonable solution.
There are two main ways to address cross-domain:

1. JSONP

The basic concept of JSONP is not much introduced, now there are many explanations on the Internet. In JSONP mode, the front-end client can request JSON files across domains, enabling the front end to request additional server resources across domains.
The support for JSONP and Ajax in some popular JavaScript libraries is very similar in performance form, almost identical in code, but JSONP is completely different from Ajax. JSONP makes requests to the server in a way that requests file data, and Ajax uses XMLHttpRequest to make requests to the server asynchronously.

• Advantages
  JSONP does not require special browser support, and it can be said that all browsers support JSONP requests. And at present the popular JavaScript library to JSONP support is very comprehensive, the development is also more convenient.

• Disadvantages
  However, the JSONP request can only be a GET request, because there is a length limit on the request URL, normally as long as no more than 2000 characters are possible (what is the maximum length of a URL?), the length supported by the mainstream browser is becoming more and more relaxed, Basically, the condition can be met.
  JSONP Web server interface because there is no way to limit the request to receive the specified domain name, there is a need for more security restrictions in the actual application to avoid interface data leaks.

2. CORS (cross-origin resource sharing)

Cross-domain is achieved primarily by defining how the browser shares content with the server.
Cors by adding a series of HTTP headers (access-control-allow-origin,access-control-expose-headers,access-control-max-age, Access-control-allow-credentials,access-control-allow-methods,access-control-allow-headers, etc.), Allows the server to declare that the source can access resources on the server through a browser. In addition, for HTTP request methods that can have a devastating effect on server data (especially HTTP methods other than GET, or with some MIME-type post requests), the standard strongly requires that the browser must first send a pre-request in the options request (preflight Request) To learn about the HTTP methods supported by the server side for cross-origin requests. The actual HTTP request method is used to send that real request in the case of a confirmation that the server allows the cross-origin request. The server side can also notify the client whether it is necessary to send credit information (including Cookies and HTTP authentication related data) along with the request.

2.1 Operating mode

If a request is made only with a simple request to the server, the browser does not need to send a pre-request to the server, and the server only needs to add access-control-allow-origin to the response, and the development is very simple, There is almost no difference between code and AJAX requests.

Simple request: Use only GET, HEAD or POST request methods. If you use POST to transfer data to the server side, the data type (Content-type) can only be one of application/x-www-form-urlencoded, Multipart/form-data, or Text/plain. Custom request headers (similar to x-modified) are not used.
However, the request is initiated in a way other than if GET, HEAD or POST. Alternatively, use POST, but the request data is a data type other than application/x-www-form-urlencoded, Multipart/form-data, or Text/plain. For example, when sending a request for XML data of the data type Application/xml or Text/xml or using a custom request header (such as adding a x-pingother), the browser needs to send a pre-request to the server. To determine if the server supports subsequent requests and, if supported, the browser continues to send subsequent AJAX requests.

2.2 jquery supports Cors

$.Ajax({PUT and delete need to send a pre-requestType:  ' HTTP METHOD ' ,//such as Get, POST  Url:  ' Cross-domain-url ' contenttype : xhrfields{ Withcredentials: false }, headers : {success:  Function () {}, error: function () {}    

See HTTP access control (CORS) for detailed use.

2.3 Compared to JSONP

Cors is easier to develop and more flexible to control security, and all modern browsers now support Cors mode, and Cors supports all HTTP method types, which can be implemented across domains in restful requests.

3. Cross-domain access in the application of reviews

In the review, many functions adopt static and dynamic separation, in the project deployment also adopts the front-end file resources and the back-end Web service independent domain name of the way; In this mode, the backend HTTP interface is a service interface for the front end, such as an interface that queries whether the user is logged on, or if it can be used by multiple projects. Therefore, the server-side interface is required to support cross-domain requests.
At present, the main use of JSONP in the review of the way to achieve cross-domain requests; Because cors is a new technology, it has not been used on a large scale and will only be used in some unimportant functions.

References

JSONP
What is the maximum length of a URL?
CORS (cross-origin resource sharing)
Cross-origin Resource Sharing
HTTP access Control (CORS)
JQuery CORS support IE ' s Xdomainrequest object plugin

Front-end cross-domain access