1. Ajax request restrictions

Ajax can only send requests to its own server. For example, if there is A website A and A website B, the HTML files in website A can only send Ajax requests to the server of website A, and the HTML files in website B can only send Ajax requests to website B, but website A cannot send Ajax requests to website B. Similarly, Web site B also cannot send Ajax requests to Web site A.

2. What is homology

  • If two pages have the same protocol, domain name, and port, they belong to the same source. If one of them is different, it is a different source.
  • www.example.com/dir/page.ht…
  • www.example.com/dir2/other….
  • Example.com/dir/other.h…
  • V2.www.example.com/dir/other.h…
  • www.example.com:81/dir/other.h…
  • www.example.com/dir/page.ht…

3. Purpose of the same-origin policy

The same-origin policy ensures user information security and prevents malicious websites from stealing data. The original same-origin policy refers to the Cookie set by website A on the client, and website B cannot be accessed.

With the development of the Internet, the same origin policy is becoming more and more strict. In the case of different sources, one of the stipulations is that Ajax requests cannot be sent to non-same origin addresses. If a request is made, the browser will report an error.

4. Use JSONP to solve the homology restriction problem

Jsonp, which stands for JSON with Padding, is not an Ajax request, but it can simulate an Ajax request.

  1. Write the server-side request addresses of different sources in the SRC attribute of the script tag
<script src="www.example.com"></script>
<script src="Https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
Copy the code
  1. The server-side response data must be a function call, and the actual data to be sent to the client needs to be the parameter of the function call.
const data = 'fn({name: "张三", age: "20"})'; 
res.send(data);
Copy the code
  1. Define the function fn under the client global scope
function fn (data) {}Copy the code
  1. The data returned by the server is processed inside the FN function
function fn (data) { console.log(data); }
Copy the code

5. JSONP code optimization

  1. The client needs to pass the function name to the server.
  2. Turn the sending of script requests into dynamic requests.
  3. Encapsulate jSONP functions to facilitate request sending.
  4. Res.jsonp method for server-side code optimization.

6. CORS cross-domain resource sharing

CORS: Cross-Origin Resource Sharing, or Cross-domain resource sharing, allows browsers to send Ajax requests to cross-domain servers, overcoming the limitation that Ajax can only be used in the same source.

origin: http://localhost:3000

Access-Control-Allow-Origin: 'http://localhost:3000' 
Access-Control-Allow-Origin: The '*'
Copy the code

Node server set the response header example code:

app.use((req, res, next) = > {
    res.header('Access-Control-Allow-Origin'.The '*');
    res.header('Access-Control-Allow-Methods'.'GET, POST'); 
    next();
})
Copy the code

7. Server-side solution for accessing non-homogeneous data

The same origin policy is a limitation imposed by the browser on Ajax technology; there is no such restriction on the server side.

8. Cookies to review

9. WithCredentials attribute

When sending a cross-domain request using Ajax technology, cookie information is not carried in the request by default.

WithCredentials: Specifies whether cookie information is carried when cross-domain requests are involved. The default value is false

Access-control-allow-credentials: true Allows clients to send requests with cookies