Fryao

Table Of Contents 1.同源政策 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。 http://www.example.com：8080/dir/page.html 与 http://www.example.com/page.html 不跨域 http:协议 www:子域名 example:主域名 8080：端口号（http默认8080） 同源策略的限制： Cookie、LocalStorage 和 IndexDB 无法读取 AJAX 请求不能发送 跨域是浏览器为了安全而实施的同源政策导致的 2.跨域解决方案 跨域报错: 2.1 CORS 有几个关键的响应头字段： a、Access-Control-Allow-Origin：必填，表示可以允许请求的来源。可以填写具体的源名称，也可以填写*表示允许任何源请求。 b、Access-Control-Allow-Methods：表示允许的请求方法列表。 c、Access-Control-Allow-Credentials：一个布尔值，表示是否允许发送cookie。默认情况下，cookie 不包含在 CORS 请求中。如果设置为 true，则表示服务器具有显式权限。Cookies 可以包含在请求中并一起发送到服务器。 d、Access-Control-Allow-Headers：其指明了实际请求中允许携带的首部字段。CORS请求时，XMLHttpRequest对象的getresponseheader()方法只能获取六个基本字段：缓存控制、内容语言、内容类型、过期时间、最后修改时间和pragma。如果要获取其他字段，则必须在访问控制公开标头中指定它们。 e、Access-Control-Max-Age：预检请求的有效期。在此期间，无需再次发送预检请求。 普通跨域请求：只需服务端设置Access-Control-Allow-Origin即可 Access-Control-Allow-Origin: * 表示该资源可以被任意外域访问，若设置具体的值则只可与设置的值跨域 备注： 当响应的是附带身份凭证的请求时（ cookie ），服务

Table Of Contents The encapsulation of network requests is essential in the front-end project. Recently, the encapsulation of the next project axios has been refactored and recorded. axios secondary packaging import axios from "axios"; import router from "../router"; //See the modification of the routing file packaged by the specific project // Jump to login page const toLogin = () => { router. replace({ path: "/login" }); }; //Encapsulate status code error handling function const errorHandle = status => { switch (status) { // Jump to the login page when the login is unsuccessful case 401: console.log("Authentication failed, no login or no permission"); toLogin(); break; case 403: //token has expired, clear the token storage localStorage. removeItem("token"); console.log("token verification failed"); toLogin(); break;

Table Of Contents 1. BFC: block-level formatting context (focus) BFC Basic Concept : BFC is a concept of CSS layout, which is an independent rendering area (environment), and the elements inside will not affect the external elements. BFC principle (rendering rules, layout rules): (1) The inner Boxes will be placed one after the other from the top in the vertical direction; (2) The vertical distance of the Box is determined by the marain, and the margins of two adjacent Boxes belonging to the same BFC will overlap; (3) The left side of each element's margin Box touches the left side of the containing block's border Box (for left-to-right formatting, otherwise vice versa). This is true even in the presence of floats; eg: Left floating means that the left side of the child div touches the left side of the borderbox of the parent div, and right floating means that the child div touches the right side of the borderbox of the parent div (4) BFC is a

Table Of Contents JS series 8.0 is mainly AJAX summary and practice,this article describes the basic knowledge of Ajax in detail, including basic Ajax requests, encapsulation of Ajax requests, request data format issues, status codes, etc. In addition, it also involves cross-domain issues and implementation issues of Ajax interceptors, and cites specific examples to deepen understanding study 1 Overview Ajax It is a set of methods provided by the browser, which can update data without refreshing the page, and improve the experience of users browsing website applications. Application scenarios: Pull up the page to load more data no refresh pagination Form item out of focus data validation Search box prompt text drop-down list Disadvantage: Ajax itself does not support cross-domain requests 2. The basic process of ajax request var xhr = new XMLHttpRequest(); xhr.open('method','url',async(can be omitted)); xhr. send(); xhr.onl

Table Of Contents The appearance of this can make the front-end code more readable and flexible to a certain extent, especially in the encapsulation of triggering events and objects and classes. Although we all know that this points to the problem is very important, it is difficult to really explain it clearly . So record my step-by-step understanding of this since I learned the front-end, I hope it will be helpful to everyone this binding rule 1 default binding 1. Global Execution Environment Whether in strict mode or not, in the global execution environment (outside any function body) this refers to the global object window 'use strict' console.log(this); //window 2. Ordinary functions are called independently In non-strict mode, this inside the function points to window function f1(){ return this; } console.log(f1()===window);//true In strict mode, this points to undefined function f1() { 'use strict'; return

Table Of Contents Basic Concept Prototype Prototypes are properties of JavaScript functions. Every time a function is created in JavaScript, the JavaScript engine adds an extra property called prototype to the created function. _proto__ and constructor properties are unique to objects The prototype attribute is unique to function , because function is also a kind of object , so the function also has proto _ and constructor attributes The proto attribute of the object is equal to the prototype of the new constructor function foo() { } console.log(foo.prototype) //foo {} var f1 = new foo() console.log(f1.__proto__ === foo.prototype) //true constructor property: a property added by default on the prototype object prototype, pointing to the object's constructor, all functions (the final constructor points to Function Prototypes allow objects to share properties and methods, simplifying the amount of code prototype chain A prototype chain