1 line
20 KiB
JavaScript
1 line
20 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[4051],{3905:function(e,t,n){n.d(t,{Zo:function(){return k},kt:function(){return c}});var r=n(7294);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var p=r.createContext({}),s=function(e){var t=r.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},k=function(e){var t=s(e.components);return r.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,l=e.mdxType,a=e.originalType,p=e.parentName,k=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=l,d=m["".concat(p,".").concat(c)]||m[c]||u[c]||a;return n?r.createElement(d,i(i({ref:t},k),{},{components:n})):r.createElement(d,i({ref:t},k))}));function c(e,t){var n=arguments,l=t&&t.mdxType;if("string"==typeof e||l){var a=n.length,i=new Array(a);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:l,i[1]=o;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},8423:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return k},default:function(){return m}});var r=n(7462),l=n(3366),a=(n(7294),n(3905)),i=["components"],o={sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u8de8\u57df",sidebar_position:1},p="\u6d4f\u89c8\u5668\u8de8\u57df",s={unversionedId:"book1/browser-cross-origin",id:"book1/browser-cross-origin",isDocsHomePage:!1,title:"\u6d4f\u89c8\u5668\u8de8\u57df",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book1/browser-cross-origin.md",sourceDirName:"book1",slug:"/book1/browser-cross-origin",permalink:"/awesome-interview/book1/browser-cross-origin",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u8de8\u57df",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"\u524d\u8a00",permalink:"/awesome-interview/"},next:{title:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u7684\u91cd\u6392\u91cd\u7ed8",permalink:"/awesome-interview/book1/browser-repain-reflow"}},k=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90",id:"1-\u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90",children:[]},{value:"2. \u5982\u4f55\u5224\u5b9a\u8de8\u57df",id:"2-\u5982\u4f55\u5224\u5b9a\u8de8\u57df",children:[]},{value:"3. \u8de8\u57df\u7684\u89e3\u51b3\u65b9\u6848",id:"3-\u8de8\u57df\u7684\u89e3\u51b3\u65b9\u6848",children:[]}]},{value:"\u6269\u5c55\u9605\u8bfb",id:"\u6269\u5c55\u9605\u8bfb",children:[{value:"1. LocalStorage / SessionStorage \u8de8\u57df",id:"1-localstorage--sessionstorage-\u8de8\u57df",children:[]},{value:"2. \u8de8\u57df\u4e0e\u76d1\u63a7",id:"2-\u8de8\u57df\u4e0e\u76d1\u63a7",children:[]},{value:"3. \u8de8\u57df\u4e0e\u56fe\u7247",id:"3-\u8de8\u57df\u4e0e\u56fe\u7247",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],u={toc:k};function m(e){var t=e.components,n=(0,l.Z)(e,i);return(0,a.kt)("wrapper",(0,r.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"\u6d4f\u89c8\u5668\u8de8\u57df"},"\u6d4f\u89c8\u5668\u8de8\u57df"),(0,a.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"\u4ec0\u4e48\u662f\u8de8\u57df"),(0,a.kt)("li",{parentName:"ul"},"\u4e3a\u4ec0\u4e48\u4f1a\u8de8\u57df"),(0,a.kt)("li",{parentName:"ul"},"\u4e3a\u4ec0\u4e48\u6709\u8de8\u57df\u9650\u5236"),(0,a.kt)("li",{parentName:"ul"},"\u600e\u4e48\u89e3\u51b3\u8de8\u57df")),(0,a.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"CORS"),(0,a.kt)("sup",null,"[1]")," ",(0,a.kt)("inlineCode",{parentName:"p"},"\u540c\u6e90\u7b56\u7565"),(0,a.kt)("sup",null,"[2]")),(0,a.kt)("p",null,"\u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90\u662f\u6d4f\u89c8\u5668\u4e3a\u4e86",(0,a.kt)("strong",{parentName:"p"},"\u8bf7\u6c42\u5b89\u5168"),"\u800c\u5f15\u5165\u7684\u57fa\u4e8e",(0,a.kt)("strong",{parentName:"p"},"\u540c\u6e90\u7b56\u7565"),"\u7684\u5b89\u5168\u7279\u6027\u3002\u5f53\u9875\u9762\u548c\u8bf7\u6c42\u7684",(0,a.kt)("strong",{parentName:"p"},"\u534f\u8bae"),"\u3001",(0,a.kt)("strong",{parentName:"p"},"\u4e3b\u673a\u540d"),"\u6216",(0,a.kt)("strong",{parentName:"p"},"\u7aef\u53e3"),"\u4e0d\u540c\u65f6\uff0c\u6d4f\u89c8\u5668\u5224\u5b9a\u4e24\u8005\u4e0d\u540c\u6e90\uff0c\u5373\u4e3a\u8de8\u57df\u8bf7\u6c42\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\u8de8\u57df\u662f",(0,a.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7684\u9650\u5236"),"\uff0c\u670d\u52a1\u7aef\u5e76\u4e0d\u53d7\u6b64\u5f71\u54cd\u3002\u5f53\u4ea7\u751f\u8de8\u57df\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 JSONP\u3001CORS\u3001postMessage \u7b49\u65b9\u5f0f\u89e3\u51b3\u3002"),(0,a.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,a.kt)("h3",{id:"1-\u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90"},"1. \u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90"),(0,a.kt)("p",null,"\u8de8\u57df\u95ee\u9898\u7684\u6765\u6e90\u662f\u6d4f\u89c8\u5668\u4e3a\u4e86",(0,a.kt)("strong",{parentName:"p"},"\u8bf7\u6c42\u5b89\u5168"),"\u800c\u5f15\u5165\u7684\u57fa\u4e8e",(0,a.kt)("strong",null,"\u540c\u6e90\u7b56\u7565\uff08Same-origin policy\uff09"),"\u7684\u5b89\u5168\u7279\u6027\u3002\u540c\u6e90\u7b56\u7565\u662f\u6d4f\u89c8\u5668\u4e00\u4e2a\u975e\u5e38\u91cd\u8981\u7684\u5b89\u5168\u7b56\u7565\uff0c\u57fa\u4e8e\u8fd9\u4e2a\u7b56\u7565\u53ef\u4ee5\u9650\u5236\u975e\u540c\u6e90\u7684\u5185\u5bb9\u4e0e\u5f53\u524d\u9875\u9762\u8fdb\u884c\u4ea4\u4e92\uff0c\u4ece\u800c\u51cf\u5c11\u9875\u9762\u88ab\u653b\u51fb\u7684\u53ef\u80fd\u6027\u3002"),(0,a.kt)("p",null,"\u5f53\u9875\u9762\u548c\u8bf7\u6c42\u7684",(0,a.kt)("strong",{parentName:"p"},"\u534f\u8bae"),"\u3001",(0,a.kt)("strong",{parentName:"p"},"\u4e3b\u673a\u540d"),"\u6216",(0,a.kt)("strong",{parentName:"p"},"\u7aef\u53e3"),"\u4e0d\u540c\u65f6\uff0c\u6d4f\u89c8\u5668\u5224\u5b9a\u4e24\u8005\u4e0d\u540c\u6e90\uff0c\u4ece\u800c\u4ea7\u751f\u8de8\u57df\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\u8de8\u57df\u662f",(0,a.kt)("strong",{parentName:"p"},"\u6d4f\u89c8\u5668\u7684\u9650\u5236"),"\uff0c\u5b9e\u9645\u8bf7\u6c42\u5df2\u7ecf\u6b63\u5e38\u53d1\u51fa\u548c\u54cd\u5e94\u4e86\u3002"),(0,a.kt)("h3",{id:"2-\u5982\u4f55\u5224\u5b9a\u8de8\u57df"},"2. \u5982\u4f55\u5224\u5b9a\u8de8\u57df"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/3984824/126035945-024df466-a92f-4564-82c5-cb5d54d66466.png",alt:"cors"})),(0,a.kt)("p",null,"\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u4e00\u4e2a origin \u7531",(0,a.kt)("strong",null,"\u534f\u8bae\uff08Protocol\uff09"),"\u3001",(0,a.kt)("strong",null,"\u4e3b\u673a\u540d\uff08Host\uff09"),"\u548c",(0,a.kt)("strong",null,"\u7aef\u53e3\uff08Port\uff09"),"\u7ec4\u6210\uff0c\u8fd9\u4e09\u5757\u4e5f\u662f\u540c\u6e90\u7b56\u7565\u7684\u5224\u5b9a\u6761\u4ef6\uff0c\u53ea\u6709\u5f53",(0,a.kt)("strong",{parentName:"p"},"\u534f\u8bae"),"\u3001",(0,a.kt)("strong",{parentName:"p"},"\u4e3b\u673a\u540d"),"\u548c",(0,a.kt)("strong",{parentName:"p"},"\u7aef\u53e3"),"\u90fd\u76f8\u540c\u65f6\uff0c\u6d4f\u89c8\u5668\u624d\u5224\u5b9a\u4e24\u8005\u662f\u540c\u6e90\u5173\u7cfb\uff0c\u5426\u5219\u5373\u4e3a\u8de8\u57df\u3002"),(0,a.kt)("h3",{id:"3-\u8de8\u57df\u7684\u89e3\u51b3\u65b9\u6848"},"3. \u8de8\u57df\u7684\u89e3\u51b3\u65b9\u6848"),(0,a.kt)("p",null,"\u524d\u7aef\u5e38\u89c1\u7684\u8de8\u57df\u89e3\u51b3\u65b9\u6848\u6709 CORS\u3001\u53cd\u4ee3\u3001JSONP \u7b49\u3002"),(0,a.kt)("h4",{id:"31-cors-cross-origin-resource-sharing"},"3.1 CORS (Cross-Origin Resource Sharing)"),(0,a.kt)("p",null,"CORS \u662f\u76ee\u524d\u6700\u4e3a\u5e7f\u6cdb\u7684\u89e3\u51b3\u8de8\u57df\u95ee\u9898\u7684\u65b9\u6848\u3002\u65b9\u6848\u4f9d\u8d56\u670d\u52a1\u7aef/\u540e\u7aef\u5728\u54cd\u5e94\u5934\u4e2d\u6dfb\u52a0 ",(0,a.kt)("inlineCode",{parentName:"p"},"Access-Control-Allow-*")," \u5934\uff0c\u544a\u77e5\u6d4f\u89c8\u5668\u7aef\u901a\u8fc7\u6b64\u8bf7\u6c42\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u6d89\u53ca\u5230\u7684\u7aef")),(0,a.kt)("p",null,"CORS \u53ea\u9700\u8981\u670d\u52a1\u7aef/\u540e\u7aef\u652f\u6301\u5373\u53ef\uff0c\u4e0d\u6d89\u53ca\u524d\u7aef\u6539\u52a8\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u5177\u4f53\u5b9e\u73b0\u65b9\u5f0f")),(0,a.kt)("p",null,"CORS \u5c06\u8bf7\u6c42\u5206\u4e3a",(0,a.kt)("strong",null,"\u7b80\u5355\u8bf7\u6c42\uff08Simple Requests\uff09"),"\u548c",(0,a.kt)("strong",null,"\u9700\u9884\u68c0\u8bf7\u6c42\uff08Preflighted requests\uff09"),"\uff0c\u4e0d\u540c\u573a\u666f\u6709\u4e0d\u540c\u7684\u884c\u4e3a\uff1a"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u7b80\u5355\u8bf7\u6c42")),(0,a.kt)("p",null,"\u4e0d\u4f1a\u89e6\u53d1\u9884\u68c0\u8bf7\u6c42\u7684\u79f0\u4e3a\u7b80\u5355\u8bf7\u6c42\u3002\u5f53\u8bf7\u6c42\u6ee1\u8db3\u4ee5\u4e0b\u6761\u4ef6\u65f6\u5c31\u662f\u4e00\u4e2a\u7b80\u5355\u8bf7\u6c42\uff1a"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"\u8bf7\u6c42\u65b9\u6cd5\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"GET"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"HEAD"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"POST"),"\u3002"),(0,a.kt)("li",{parentName:"ul"},"\u8bf7\u6c42\u5934\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"Accept"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"Accept-Language"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"Content-Language"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"Content-Type"),"\u3002",(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"Content-Type \u4ec5\u652f\u6301\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"application/x-www-form-urlencoded"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"multipart/form-data"),"\u3001",(0,a.kt)("inlineCode",{parentName:"li"},"text/plain"),"\u3002")))),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u9700\u9884\u68c0\u8bf7\u6c42")),(0,a.kt)("p",null,"\u5f53\u4e00\u4e2a\u8bf7\u6c42\u4e0d\u6ee1\u8db3\u4ee5\u4e0a\u7b80\u5355\u8bf7\u6c42\u7684\u6761\u4ef6\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5411\u670d\u52a1\u7aef\u53d1\u9001\u4e00\u4e2a ",(0,a.kt)("strong",{parentName:"p"},"OPTIONS")," \u8bf7\u6c42\uff0c\u901a\u8fc7\u670d\u52a1\u7aef\u8fd4\u56de\u7684 ",(0,a.kt)("inlineCode",{parentName:"p"},"Access-Control-Allow-*")," \u5224\u5b9a\u8bf7\u6c42\u662f\u5426\u88ab\u5141\u8bb8\u3002"),(0,a.kt)("p",null,"CORS \u5f15\u5165\u4e86\u4ee5\u4e0b\u51e0\u4e2a\u4ee5 ",(0,a.kt)("inlineCode",{parentName:"p"},"Access-Control-Allow-*")," \u5f00\u5934\uff1a"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Access-Control-Allow-Origin")," \u8868\u793a\u5141\u8bb8\u7684\u6765\u6e90"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Access-Control-Allow-Methods")," \u8868\u793a\u5141\u8bb8\u7684\u8bf7\u6c42\u65b9\u6cd5"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Access-Control-Allow-Headers")," \u8868\u793a\u5141\u8bb8\u7684\u8bf7\u6c42\u5934"),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("inlineCode",{parentName:"li"},"Access-Control-Allow-Credentials")," \u8868\u793a\u5141\u8bb8\u643a\u5e26\u8ba4\u8bc1\u4fe1\u606f")),(0,a.kt)("p",null,"\u5f53\u8bf7\u6c42\u7b26\u5408\u54cd\u5e94\u5934\u7684\u8fd9\u4e9b\u6761\u4ef6\u65f6\uff0c\u6d4f\u89c8\u5668\u624d\u4f1a\u53d1\u9001\u5e76\u54cd\u5e94\u6b63\u5f0f\u7684\u8bf7\u6c42\u3002"),(0,a.kt)("h4",{id:"32-\u53cd\u5411\u4ee3\u7406"},"3.2 \u53cd\u5411\u4ee3\u7406"),(0,a.kt)("p",null,"\u53cd\u5411\u4ee3\u7406\u89e3\u51b3\u8de8\u57df\u95ee\u9898\u7684\u65b9\u6848\u4f9d\u8d56\u540c\u6e90\u7684\u670d\u52a1\u7aef\u5bf9\u8bf7\u6c42\u505a\u4e00\u4e2a\u8f6c\u53d1\u5904\u7406\uff0c\u5c06\u8bf7\u6c42\u4ece\u8de8\u57df\u8bf7\u6c42\u8f6c\u6362\u6210\u540c\u6e90\u8bf7\u6c42\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u6d89\u53ca\u5230\u7684\u7aef")),(0,a.kt)("p",null,"\u53cd\u5411\u4ee3\u7406\u53ea\u9700\u8981\u670d\u52a1\u7aef/\u540e\u7aef\u652f\u6301\uff0c\u51e0\u4e4e\u4e0d\u6d89\u53ca\u524d\u7aef\u6539\u52a8\uff0c\u53ea\u7528\u5207\u6362\u63a5\u53e3\u5373\u53ef\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u5177\u4f53\u5b9e\u73b0\u65b9\u5f0f")),(0,a.kt)("p",null,"\u53cd\u5411\u4ee3\u7406\u7684\u5b9e\u73b0\u65b9\u5f0f\u4e3a\u5728\u9875\u9762\u540c\u57df\u4e0b\u914d\u7f6e\u4e00\u5957\u53cd\u5411\u4ee3\u7406\u670d\u52a1\uff0c\u9875\u9762\u8bf7\u6c42\u540c\u57df\u7684\u670d\u52a1\u7aef\uff0c\u670d\u52a1\u7aef\u8bf7\u6c42\u4e0a\u6e38\u7684\u5b9e\u9645\u7684\u670d\u52a1\u7aef\uff0c\u4e4b\u540e\u5c06\u7ed3\u679c\u8fd4\u56de\u7ed9\u524d\u7aef\u3002"),(0,a.kt)("h4",{id:"33-jsonp"},"3.3 JSONP"),(0,a.kt)("p",null,"JSONP \u662f\u4e00\u4e2a\u76f8\u5bf9\u53e4\u8001\u7684\u8de8\u57df\u89e3\u51b3\u65b9\u6848\u3002\u4e3b\u8981\u662f\u5229\u7528\u4e86\u6d4f\u89c8\u5668\u52a0\u8f7d JavaScript \u8d44\u6e90\u6587\u4ef6\u65f6\u4e0d\u53d7\u540c\u6e90\u7b56\u7565\u7684\u9650\u5236\u800c\u5b9e\u73b0\u8de8\u57df\u83b7\u53d6\u6570\u636e\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u6d89\u53ca\u5230\u7684\u7aef")),(0,a.kt)("p",null,"JSONP \u9700\u8981\u670d\u52a1\u7aef\u548c\u524d\u7aef\u914d\u5408\u5b9e\u73b0\u3002"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"\u5177\u4f53\u5b9e\u73b0\u65b9\u5f0f")),(0,a.kt)("p",null,"JSONP \u7684\u539f\u7406\u662f\u5229\u7528\u4e86\u6d4f\u89c8\u5668\u52a0\u8f7d JavaScript \u8d44\u6e90\u6587\u4ef6\u65f6\u4e0d\u53d7\u540c\u6e90\u7b56\u7565\u7684\u9650\u5236\u800c\u5b9e\u73b0\u7684\u3002\u5177\u4f53\u6d41\u7a0b\u5982\u4e0b\uff1a"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"\u5168\u5c40\u6ce8\u518c\u4e00\u4e2a\u51fd\u6570\uff0c\u4f8b\u5982\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"window.getHZFEMember = (num) => console.log('HZFE Member: ' + hzfeMember);"),"\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u6784\u9020\u4e00\u4e2a\u8bf7\u6c42 URL\uff0c\u4f8b\u5982\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"https://hzfe.org/api/hzfeMember?callback=getHZFEMember"),"\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u751f\u6210\u4e00\u4e2a ",(0,a.kt)("inlineCode",{parentName:"li"},"<script>")," \u5e76\u628a ",(0,a.kt)("inlineCode",{parentName:"li"},"src")," \u8bbe\u4e3a\u4e0a\u4e00\u6b65\u7684\u8bf7\u6c42 URL \u5e76\u63d2\u5165\u5230\u6587\u6863\u4e2d\uff0c\u5982 ",(0,a.kt)("inlineCode",{parentName:"li"},'<script src="https://hzfe.org/api/hzfeMember?callback=getHZFEMember" />'),"\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u670d\u52a1\u7aef\u6784\u9020\u4e00\u4e2a JavaScript \u51fd\u6570\u8c03\u7528\u8868\u8fbe\u5f0f\u5e76\u8fd4\u56de\uff0c\u4f8b\u5982\uff1a",(0,a.kt)("inlineCode",{parentName:"li"},"getHZFEMember(17)"),"\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u6d4f\u89c8\u5668\u52a0\u8f7d\u5e76\u6267\u884c\u4ee5\u4e0a\u4ee3\u7801\uff0c\u8f93\u51fa ",(0,a.kt)("inlineCode",{parentName:"li"},"HZFE Member: 17"),"\u3002")),(0,a.kt)("h4",{id:"\u975e\u5e38\u7528\u65b9\u5f0f"},"\u975e\u5e38\u7528\u65b9\u5f0f"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"postMessage"),(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u5373\u5728\u4e24\u4e2a origin \u4e0b\u5206\u522b\u90e8\u7f72\u4e00\u5957\u9875\u9762 A \u4e0e B\uff0cA \u9875\u9762\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"li"},"iframe")," \u52a0\u8f7d B \u9875\u9762\u5e76\u76d1\u542c\u6d88\u606f\uff0cB \u9875\u9762\u53d1\u9001\u6d88\u606f\u3002"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"window.name"),(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u4e3b\u8981\u662f\u5229\u7528 ",(0,a.kt)("inlineCode",{parentName:"li"},"window.name")," \u9875\u9762\u8df3\u8f6c\u4e0d\u6539\u53d8\u7684\u7279\u6027\u5b9e\u73b0\u8de8\u57df\uff0c\u5373 ",(0,a.kt)("inlineCode",{parentName:"li"},"iframe")," \u52a0\u8f7d\u4e00\u4e2a\u8de8\u57df\u9875\u9762\uff0c\u8bbe\u7f6e ",(0,a.kt)("inlineCode",{parentName:"li"},"window.name"),"\uff0c\u8df3\u8f6c\u5230\u540c\u57df\u9875\u9762\uff0c\u53ef\u4ee5\u901a\u8fc7 ",(0,a.kt)("inlineCode",{parentName:"li"},"$('iframe').contentWindow.name")," \u62ff\u5230\u8de8\u57df\u9875\u9762\u7684\u6570\u636e\u3002"))),(0,a.kt)("li",{parentName:"ul"},(0,a.kt)("strong",{parentName:"li"},"document.domain"),(0,a.kt)("ul",{parentName:"li"},(0,a.kt)("li",{parentName:"ul"},"\u53ef\u5c06\u76f8\u540c\u4e00\u7ea7\u57df\u540d\u4e0b\u7684\u5b50\u57df\u540d\u9875\u9762\u7684 ",(0,a.kt)("inlineCode",{parentName:"li"},"document.domain")," \u8bbe\u7f6e\u4e3a\u4e00\u7ea7\u57df\u540d\u5b9e\u73b0\u8de8\u57df\u3002"),(0,a.kt)("li",{parentName:"ul"},"\u53ef\u5c06\u540c\u57df\u4e0d\u540c\u7aef\u53e3\u7684 ",(0,a.kt)("inlineCode",{parentName:"li"},"document.domain")," \u8bbe\u7f6e\u4e3a\u540c\u57df\u540d\u5b9e\u73b0\u8de8\u57df\uff08\u7aef\u53e3\u88ab\u7f6e\u4e3a null\uff09\u3002")))),(0,a.kt)("h2",{id:"\u6269\u5c55\u9605\u8bfb"},"\u6269\u5c55\u9605\u8bfb"),(0,a.kt)("h3",{id:"1-localstorage--sessionstorage-\u8de8\u57df"},"1. LocalStorage / SessionStorage \u8de8\u57df"),(0,a.kt)("p",null,"LocalStorage \u548c SessionStorage \u540c\u6837\u53d7\u5230\u540c\u6e90\u7b56\u7565\u7684\u9650\u5236\u3002\u800c\u8de8\u57df\u8bfb\u5199\u7684\u65b9\u5f0f\u4e5f\u53ef\u4ee5\u4f7f\u7528\u524d\u6587\u63d0\u5230\u7684 postMessage\u3002"),(0,a.kt)("h3",{id:"2-\u8de8\u57df\u4e0e\u76d1\u63a7"},"2. \u8de8\u57df\u4e0e\u76d1\u63a7"),(0,a.kt)("p",null,"\u524d\u7aef\u9879\u76ee\u5728\u7edf\u8ba1\u524d\u7aef\u62a5\u9519\u76d1\u63a7\u65f6\u4f1a\u9047\u5230\u4e0a\u62a5\u7684\u5185\u5bb9\u53ea\u6709 ",(0,a.kt)("inlineCode",{parentName:"p"},"Script Error")," \u7684\u95ee\u9898\u3002\u8fd9\u4e2a\u95ee\u9898\u4e5f\u662f\u7531\u540c\u6e90\u7b56\u7565\u5f15\u8d77\u3002\u5728 ",(0,a.kt)("inlineCode",{parentName:"p"},"<script>")," \u6807\u7b7e\u4e0a\u6dfb\u52a0 ",(0,a.kt)("inlineCode",{parentName:"p"},'crossorigin="anonymous"')," \u5e76\u4e14\u8fd4\u56de\u7684 JS \u6587\u4ef6\u54cd\u5e94\u5934\u52a0\u4e0a ",(0,a.kt)("inlineCode",{parentName:"p"},"Access-Control-Allow-Origin: *")," \u5373\u53ef\u6355\u6349\u5230\u5b8c\u6574\u7684\u9519\u8bef\u5806\u6808\u3002"),(0,a.kt)("h3",{id:"3-\u8de8\u57df\u4e0e\u56fe\u7247"},"3. \u8de8\u57df\u4e0e\u56fe\u7247"),(0,a.kt)("p",null,"\u524d\u7aef\u9879\u76ee\u5728\u56fe\u7247\u5904\u7406\u65f6\u53ef\u80fd\u4f1a\u9047\u5230\u56fe\u7247\u7ed8\u5236\u5230 Canvas \u4e0a\u4e4b\u540e\u5374\u4e0d\u80fd\u8bfb\u53d6\u50cf\u7d20\u6216\u5bfc\u51fa base64 \u7684\u95ee\u9898\u3002\u8fd9\u4e2a\u95ee\u9898\u4e5f\u662f\u7531\u540c\u6e90\u7b56\u7565\u5f15\u8d77\u3002\u89e3\u51b3\u65b9\u5f0f\u548c\u4e0a\u6587\u76f8\u540c\uff0c\u7ed9\u56fe\u7247\u6dfb\u52a0 ",(0,a.kt)("inlineCode",{parentName:"p"},'crossorigin="anonymous"')," \u5e76\u5728\u8fd4\u56de\u7684\u56fe\u7247\u6587\u4ef6\u54cd\u5e94\u5934\u52a0\u4e0a ",(0,a.kt)("inlineCode",{parentName:"p"},"Access-Control-Allow-Origin: *")," \u5373\u53ef\u89e3\u51b3\u3002"),(0,a.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS"},"Cross-Origin Resource Sharing (CORS)")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy"},"Same-origin policy"))))}m.isMDXComponent=!0}}]); |