Read the directory

In-depth Cross-domain Problem (1) – A First Understanding of CORS cross-domain resource Sharing

Deep cross domain Problem (2) – Using CORS to solve cross domain

Deep cross domain Problems (3) – Using JSONP to solve cross domain problems

Deep cross – domain problems (4) – cross – domain solutions using proxy servers

preface

Cross-domain problems have been plaguing us for a long time, especially under the condition of front-end and back-end separation development, it is almost certain to encounter cross-domain problems.

There are also many cross-domain solutions: JSONP, IFrame, proxy, reverse proxy, etc.

If you have worked with the backstage development partner, you must be familiar with this sentence:

Access-Control-Allow-Origin: *
Copy the code

In fact, this already belongs to the content of CORS cross-domain resource sharing, but there are still many problems when the front end and the background interact.

The main reason for these problems: you and the backend are not familiar with CORS, not only the backend needs to be familiar with CORS, but also the front end!!

In this article, I mainly describe the same origin policy of CORS. In the following articles, I will use Node to simulate and solve the cross-domain problem.

Produces cross-domain conditions

The cornerstone of browser security is the same origin policy. What is the same origin policy? In short, there are three things in common:

  • The protocol is the same.
  • Same domain name.
  • The ports are the same.

If all three are the same, they are called “same origin.” The same origin policy ensures that your server’s interface is private.

CORS cross-domain resource sharing means that in one or more of these three different situations, the content of the server interface is allowed to be obtained across the source.

However, to break the same-origin policy, CORS must follow certain rules to ensure the data security of the server.

Cross-domain examples:

Different ports:

Suppose your computer now has two servers running on different ports:

http:/ / localhost: 8080 / index. The HTML / / sending ajax requests

http://localhost:3000 // Provides the interface
Copy the code

In this case, the server does not adhere to the same origin policy, and you have a cross-domain problem.

Different agreements:

To take a very common example, double-click on an HTML file and you’ll see that on your browser you’ll see:

file:/ / / Users/XXX/Documents/index. The HTML / / client

http://localhost:3000 // Server
Copy the code

This is a simple cross-domain example of different protocols, and this example is the best one we can implement…

Different domain names:

This is even more obvious:

https://www.xxx.com/index.html // Client

https://www.yyy.com // server
Copy the code

I don’t think I need to explain this too much.

CORS resource sharing

I think most people, when they look at the MDN documentation, they’re confused, they feel like it makes sense but they don’t know how to use it.

To put it bluntly, CORS just adds a number of header fields inside HTTP protocol to make rules for implementing cross-domain resource sharing.

What are the header fields? HTTP Access Control (CORS) MDN documents.

Advance request

This rule states that in a cross-domain environment, the browser will send two requests to the server under the following conditions;

For example, assume that the client needs to initiate a PUT request

  1. First, the client sends an OPTIONS request to the server.
  2. Inside the server, some configuration needs to be made on the OPTIONS request to tell the client whether to allow access.
  3. The client verifies that the server allows the method and finally sends a PUT request. Otherwise, an error is thrown and the server denies access to the method.

This configuration ensures the security of the server, the server can control the client access to the content!!

There are three ways to trigger a pre-request:

  1. Some methods are used, such as PUT, DELETE, etc.
  2. The Fetch specification specifies a set of header fields that are CORS safe, and artificial Settings trigger a pre-request.
  3. The value of content-type is nottext/plain ，multipart/form-data.application/x-www-form-urlencoded

For space reasons, I have not listed them completely, please check themHTTP Access Control (CORS)MDN document.

Non-pre-request:

This rule states that, in the case of cross-domain generation, certain requests and methods do not require a pre-request, but only send a request.

Simple requests such as GET, POST, and HEAD.

Question to consider:

Now, we have a scenario where we need to send a request using Ajax. Can we trigger a pre-request?

Example 1:

var data = { name: 'BruceLee'.password: '123456' };

$.ajax({
    url: "http://localhost:3000".type: "get".success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg); }})Copy the code

Example 2:

var data = { name: 'BruceLee'.password: '123456' };

$.ajax({
    url: "http://localhost:3000".type: "post".success: function (result) {
        console.log(result);
    },
    error: function (msg) {
        console.log(msg); }})Copy the code

Example 3:

var data = { name: 'BruceLee', password: '123456' };

$.ajax({
    url: "http://localhost:3000",
    type: "post",
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8', success: function (result) { console.log(result); }, error: function (msg) { console.log(msg); }})Copy the code

Carefully analyze the above three examples, the example is very simple, as the front end, you will have a new understanding of CORS.

Reference and Acknowledgements:

  • HTTP Access Control (CORS) MDN documents.
  • Browser same origin policy and its circumvention Ruan Yifeng.
  • Cross domain resource sharing CORS Details Ruan Yifeng.

Many thanks to the authors of the references above, their article is very deep and worth reading.