1"use strict";(self.webpackChunkblog=self.webpackChunkblog||[]).push([[1823],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>g});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),m=p(n),d=r,g=m["".concat(s,".").concat(d)]||m[d]||u[d]||l;return n?a.createElement(g,o(o({ref:t},c),{},{components:n})):a.createElement(g,o({ref:t},c))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=d;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[m]="string"==typeof e?e:r,o[1]=i;for(var p=2;p<l;p++)o[p]=n[p];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},8604:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>u,frontMatter:()=>l,metadata:()=>i,toc:()=>p});var a=n(7462),r=(n(7294),n(3905));const l={authors:"fish",date:new Date("2019-08-20T00:00:00.000Z"),tags:["HTTP","\u8de8\u57df"]},o="HTTP\u4e4b\u8de8\u57df",i={permalink:"/blog/HTTP\u4e4b\u8de8\u57df",editUrl:"https://github.com/yijinc/yijinc.github.io/blog/HTTP\u4e4b\u8de8\u57df.md",source:"@site/blog/HTTP\u4e4b\u8de8\u57df.md",title:"HTTP\u4e4b\u8de8\u57df",description:"\u8de8\u6e90\u8d44\u
16e90\u5171\u4eab CORS",date:"2019-08-20T00:00:00.000Z",formattedDate:"August 20, 2019",tags:[{label:"HTTP",permalink:"/blog/tags/http"},{label:"\u8de8\u57df",permalink:"/blog/tags/\u8de8\u57df"}],readingTime:7.39,hasTruncateMarker:!1,authors:[{name:"fish",title:"\u524d\u7aef",url:"https://github.com/yijinc",imageURL:"https://avatars.githubusercontent.com/u/8774441?v=4",key:"fish"}],frontMatter:{authors:"fish",date:"2019-08-20T00:00:00.000Z",tags:["HTTP","\u8de8\u57df"]},prevItem:{title:"HTTP\u4e4b\u7f13\u5b58",permalink:"/blog/HTTP\u4e4b\u7f13\u5b58"},nextItem:{title:"JavaScript\u7684\u6df1\u62f7\u8d1d\u6d45\u62f7\u8d1d",permalink:"/blog/JavaScript\u7684\u6df1\u62f7\u8d1d\u6d45\u62f7\u8d1d"}},s={authorsImageUrls:[void 0]},p=[{value:"\u8de8\u6e90\u8d44\u6e90\u5171\u4eab CORS",id:"\u8de8\u6e90\u8d44\u6e90\u5171\u4eab-cors",level:2},{value:"\u7b80\u5355\u8bf7\u6c42",id:"\u7b80\u5355\u8bf7\u6c42",level:3},{value:"\u9884\u68c0\u8bf7\u6c42\uff08preflight request\uff09",id:"\u9884\u68c0\u8bf7\u6c42preflight-request",level:3},{value:"\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1\u7684\u8bf7\u6c42\uff08withCredentials\uff09",id:"\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1\u7684\u8bf7\u6c42withcredentials",level:3},{value:"\u8de8\u57df\u5e38\u89c1\u89e3\u51b3\u65b9\u6848",id:"\u8de8\u57df\u5e38\u89c1\u89e3\u51b3\u65b9\u6848",level:2},{value:"1\u3001\u670d\u52a1\u7aef\u76f4\u63a5\u914d\u7f6e Access-Control-Allow-Origin",id:"1\u670d\u52a1\u7aef\u76f4\u63a5\u914d\u7f6e-access-control-allow-origin",level:3},{value:"2\u3001JSONP\u8de8\u57df",id:"2jsonp\u8de8\u57df",level:3},{value:"3\u3001nginx \u670d\u52a1\u5668\u4ee3\u7406",id:"3nginx-\u670d\u52a1\u5668\u4ee3\u7406",level:3},{value:"4\u3001\u6784\u5efa\u5de5\u5177\u4ee3\u7406\uff08\u5f00\u53d1\u73af\u5883\uff09",id:"4\u6784\u5efa\u5de5\u5177\u4ee3\u7406\u5f00\u53d1\u73af\u5883",level:3},{value:"5\u3001\u7cfb\u7edfhost\u6dfb\u52a0\u57df\u540d",id:"5\u7cfb\u7edfhost\u6dfb\u52a0\u57df\u540d",level:3},{value:"6\u3001window.postMessage + iframe",id:"6windowpostmessage--iframe",level:3}],c={toc:p},m="wrapper";
1function u(e){let{components:t,...n}=e;return(0,r.kt)(m,(0,a.Z)({},c,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h2",{id:"\u8de8\u6e90\u8d44\u6e90\u5171\u4eab-cors"},"\u8de8\u6e90\u8d44\u6e90\u5171\u4eab CORS"),(0,r.kt)("p",null,"\u8de8\u6e90\u8d44\u6e90\u5171\u4eab\uff08Cross-Origin Resource Sharing\uff09\u662f\u4e00\u79cd\u57fa\u4e8e HTTP \u5934\u7684\u673a\u5236\u3002\u51fa\u4e8e\u5b89\u5168\u6027\uff0c\u6d4f\u89c8\u5668\u9650\u5236\u811a\u672c\u5185\u53d1\u8d77\u7684\u8de8\u57df\u8bf7\u6c42\uff0c \u4f8b\u5982\uff0c",(0,r.kt)("em",{parentName:"p"},"XMLHttpRequest")," \u548c ",(0,r.kt)("em",{parentName:"p"},"Fetch API")," \u9075\u5faa ",(0,r.kt)("strong",{parentName:"p"},"\u540c\u6e90\u7b56\u7565\uff08Same-origin policy\uff09"),"\u3002CORS \u673a\u5236\u5141\u8bb8\u670d\u52a1\u5668\u58f0\u660e\u54ea\u4e9b\u6e90\u7ad9\u901a\u8fc7\u6d4f\u89c8\u5668\u6709\u6743\u9650\u8bbf\u95ee\u54ea\u4e9b\u8d44\u6e90\u3002"),(0,r.kt)("h3",{id:"\u7b80\u5355\u8bf7\u6c42"},"\u7b80\u5355\u8bf7\u6c42"),(0,r.kt)("p",null,"\u7b80\u5355\u8bf7\u6c42\uff08\u4e0d\u4f1a\u89e6\u53d1 CORS \u9884\u68c0\u8bf7\u6c42\uff09\u9700\u6ee1\u8db3",(0,r.kt)("strong",{parentName:"p"},"\u6240\u6709"),"\u4e0b\u8ff0\u6761\u4ef6\uff1a"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"Request-Method \u53ea\u80fd\u662f GET | HEAD | POST"),(0,r.kt)("li",{parentName:"ul"},"Request-Headers \u5141\u8bb8\u4eba\u4e3a\u8bbe\u7f6e\u7684\u5b57\u6bb5\u53ea\u80fd\u5305\u542b Accept\u3001Accept-Language\u3001Content-Language\u3001Content-Type "),(0,r.kt)("li",{parentName:"ul"},"Content-Type \u53ea\u80fd\u662f text/plain | multipart/form-data | application/x-www-form-urlencoded"),(0,r.kt)("li",{parentName:"ul"},"XMLHttpRequest \u5bf9\u8c61\u6ca1\u6709\u6ce8\u518c\u4efb\u4f55\u4e8b\u4ef6\u76d1\u542c\u5668\uff1bXMLHttpRequest \u5bf9\u8c61\u53ef\u4ee5\u4f7f\u7528 XMLHttpRequest.upload \u5c5e\u6027\u8bbf\u95ee"),(0,r.kt)("li",{parentName:"ul"},"\u8bf7\u6c42\u4e2d\u6ca1\u6709\u4f7f\u7528 ReadableStream \u5bf9\u8c61")),(0,r.kt)("p",null,"\u7b80\u5355\u8bf7\u6c42\u6d89\u53ca\u7684\u8bf7\u6c42\u5934\u6709 Origin\u3001Access-Control-Allow-Origin\u3001Access-Control-Expose-Headers\u3001 Access-Control-Allow-Credentials\u7b49\uff1b"),(0,r.kt)("h3",{id:"\u9884\u68c0\u8bf7\u6c42preflight-request"},"\u9884\u68c0\u8bf7\u6c42\uff08preflight request\uff09"),(0,r.kt)("p",null,"CORS\u8981\u6c42\uff0c\u90a3\u4e9b\u53ef\u80fd\u5bf9\u670d\u52a1\u5668\u6570\u636e\u4ea7\u751f\u526f\u4f5c\u7528\u7684 HTTP \u8bf7\u6c42\uff0c\u6d4f\u89c8\u5668\u5fc5\u987b\u9996\u5148\u4f7f\u7528 ",(0,r.kt)("inlineCode",{parentName:"p"},"OPTIONS")," \u65b9\u6cd5\u53d1\u8d77\u4e00\u4e2a ",(0,r.kt)("strong",{parentName:"p"},"\u9884\u68c0\u8bf7\u6c42\uff08preflight request\uff09"),"\uff0c\u4ece\u800c\u83b7\u77e5\u670d\u52a1\u7aef\u662f\u5426\u5141\u8bb8\u8be5\u8de8\u6e90\u8bf7\u6c42\u3002\u670d\u52a1\u5668\u786e\u8ba4\u5141\u8bb8\u4e4b\u540e\uff0c\u624d\u53d1\u8d77\u5b9e\u9645\u7684 HTTP \u8bf7\u6c42\u3002"),(0,r.kt)("p",null,"\u9884\u68c0\u8bf7\u6c42\u5934\u5b57\u6bb5"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"\u5b57\u6bb5\u540d\u79f0"),(0,r.kt)("th",{parentName:"tr",align:"left"},"\u8bf4\u660e"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Origin"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u8868\u660e\u9884\u68c0\u8bf7\u6c42\u6216\u5b9e\u9645\u8bf7\u6c42\u7684\u6e90\u7ad9 domain")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Request-Headers"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u7528\u4e8e\u9884\u68c0\u8bf7\u6c42\uff0c\u5c06\u5b9e\u9645\u8bf7\u6c42\u5934\u544a\u8bc9\u670d\u52a1\u5668")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Request-Method"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u7528\u4e8e\u9884\u68c0\u8bf7\u6c42\uff0c\u5c06\u5b9e\u9645\u8bf7\u6c42\u65b9\u6cd5\u544a\u8bc9\u670d\u52a1\u5668")))),(0,r.kt)("p",null,"\u9884\u68c0\u54cd\u5e94\u5934\u5b57\u6bb5"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"\u5b57\u6bb5\u540d\u79f0"),(0,r.kt)("th",{parentName:"tr",align:"left"},"\u8bf4\u660e"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Allow-Origin"),(0,r.kt)("td",{parentName:"tr",align:"left"}
1,"\u6307\u5b9a\u5141\u8bb8\u8bbf\u95ee\u8be5\u8d44\u6e90\u7684\u5916\u57df URI\uff0c\u53ef\u4ee5\u8bbe\u7f6e\u4e3a",(0,r.kt)("strong",{parentName:"td"},"*")," \u5141\u8bb8\u6240\u6709\u57df\u7684\u8bf7\u6c42")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Allow-Headers"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u54cd\u5e94\u9884\u68c0\u8bf7\u6c42\uff0c\u6307\u660e\u4e86\u5b9e\u9645\u8bf7\u6c42\u4e2d\u5141\u8bb8\u643a\u5e26\u7684\u9996\u90e8\u5b57\u6bb5")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Allow-Methods"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u54cd\u5e94\u9884\u68c0\u8bf7\u6c42\uff0c\u6307\u660e\u4e86\u5b9e\u9645\u8bf7\u6c42\u6240\u5141\u8bb8\u4f7f\u7528\u65b9\u6cd5")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Max-Age"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u6307\u5b9a\u9884\u68c0\u8bf7\u6c42\u7684\u7ed3\u679c\u80fd\u591f\u88ab\u7f13\u5b58\u591a\u4e45\uff0c\u5982\u679c\u5728\u6709\u6548\u671f\u5185\uff0c\u518d\u6b21\u8bf7\u6c42\u5c06\u4e0d\u4f1a\u53d1\u8d77\u9884\u68c0\u8bf7\u6c42")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Allow-Credentials"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u6307\u660e\u4e86\u5b9e\u9645\u7684\u8bf7\u6c42\u662f\u5426\u53ef\u4ee5\u4f7f\u7528 credentials")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},"Access-Control-Expose-Headers"),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u670d\u52a1\u5668\u66b4\u9732\u4e00\u4e9b\u81ea\u5b9a\u4e49\u7684\u76f8\u5e94\u5934,\u5141\u8bb8\u5ba2\u6237\u7aef\u95ee\uff08\u5426\u5219response\u662f\u62ff\u4e0d\u5230\u8fd9\u4e9b\u5934\u5b57\u6bb5\u7684\uff09")))),(0,r.kt)("h3",{id:"\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1\u7684\u8bf7\u6c42withcredentials"},"\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1\u7684\u8bf7\u6c42\uff08withCredentials\uff09"),(0,r.kt)("p",null,"\u4e00\u822c\u60c5\u51b5\uff0c\u5bf9\u4e8e\u8de8\u6e90 XMLHttpRequest \u6216 Fetch \u8bf7\u6c42\uff0c\u6d4f\u89c8\u5668\u4e0d\u4f1a\u53d1\u9001\u8eab\u4efd\u51ed\u8bc1\u606f\uff08cookie\uff09\u3002\u5982\u679c\u8981\u628a Cookie \u53d1\u5230\u670d\u52a1\u5668\uff0c\u4e00\u65b9\u9762\u8981\u670d\u52a1\u5668\u540c\u610f\uff0c\u6307\u5b9a Access-Control-Allow-Credentials\u5b57\u6bb5"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"Access-Control-Allow-Credentials: true\n")),(0,r.kt)("p",null,"\u53e6\u4e00\u65b9\u9762\uff0c\u5f00\u53d1\u8005\u5fc5\u987b\u5728 XMLHttpRequest \u6216 Fetch \u8bf7\u6c42\u4e2d\u660e\u786e\u6307\u660e\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"// XMLHttpRequest withCredentials\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', 'https://api.other.com/resources', true);\nxhr.withCredentials = true;\nxhr.onreadystatechange = handler;\nxhr.send();\n\n// Fetch withCredentials\nfetch('https://api.other.com/resources', {\n mode: \"cors\",\n credentials: \"include\"\n});\n\n")),(0,r.kt)("p",null,"\u670d\u52a1\u5668\u5728\u54cd\u5e94\u9644\u5e26\u8eab\u4efd\u51ed\u8bc1\u7684\u8bf7\u6c42\u65f6\uff1aCORS \u54cd\u5e94\u5934\uff08Access-Control-Allow-Origin\u3001Access-Control-Allow-Headers\u3001Access-Control-Allow-Methods\uff09\u7684\u503c",(0,r.kt)("strong",{parentName:"p"},"\u4e0d\u80fd\u8bbe\u4e3a\u901a\u914d\u7b26 *")," \uff0c\u800c\u5e94\u5c06\u5176\u8bbe\u7f6e\u4e3a\u786e\u5b9a\u7684\u503c\uff0c\u5426\u5219\u4f1a\u8bf7\u6c42\u5931\u8d25\u3002"),(0,r.kt)("p",null,"Cookie \u7b56\u7565\u53d7 ",(0,r.kt)("strong",{parentName:"p"},"SameSite")," \u5c5e\u6027\u63a7\u5236\uff0c\u5982\u679c SameSite \u503c\u4e0d\u662f ",(0,r.kt)("inlineCode",{parentName:"p"},"None"),"\uff0c\u5c31\u7b97\u8bbe\u7f6e\u4e86withCredentials\uff0ccookie \u4e5f\u4e0d\u4f1a\u88ab\u53d1\u9001\u5230\u8de8\u6e90\u7684\u670d\u52a1\u5668\u3002"),(0,r.kt)("p",null,"\u54cd\u5e94\u5934\u4e2d\u4e5f\u53ef\u4ee5\u643a\u5e26 Set-Cookie \u5b57\u6bb5\uff0c\u5c1d\u8bd5\u5bf9 Cookie \u8fdb\u884c\u4fee\u6539\u3002\u5982\u679c\u7528\u6237\u6d4f\u89c8\u5668\u7684\u7b2c\u4e09\u65b9 cookie \u7b56\u7565\u8bbe\u7f6e\u4e3a\u62d2\u7edd\u6240\u6709\u7b2c\u4e09\u65b9 cookies\uff0c\u90a3\u4e48\u4f1a\u64cd\u4f5c\u5931\u8d25\uff0c\u5c06\u4f1a\u629b\u51fa\u5f02\u5e38\u3002"),(0,r.kt)("p",null,"\u8bbe\u7f6e\u5141\u8bb8\u8de8\u7ad9\u53d1\u9001\u7684cookie\uff0c\u4f46\u8fd9\u6837\u53ef\u80fd\u5bfc\u81f4 ",(0,r.kt)("strong",{parentName:"p"},"\u8de8\u7ad9\u8bf7\u6c42\u4f2a\u9020"),"\uff08Cross-site request forgery\uff0cCSRF\uff09\u653b\u51fb\u53d8\u5f97\u5bb9\u6613\u3002"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly; Secure; SameSite=None\n")),(0,r.kt)("h2",{id:"\u8de8\u57df\u5e38\u89c1\u89e3\u51b3\u65b9\u6848"},"\u8de8\u57df\u5e38\u89c1\u89e3\u51b3\u65b9\u6848"),(0,r.kt)("h3",{id:"1\u670d\u52a1\u7aef\u76f4\u63a5\u914d\u7f6e-access-control-allow-origin"}
1,"1\u3001\u670d\u52a1\u7aef\u76f4\u63a5\u914d\u7f6e Access-Control-Allow-Origin"),(0,r.kt)("p",null,"\u57fa\u4e8e\u4e0a\u8ff0CORS\u673a\u5236\uff0c\u670d\u52a1\u7aef\u914d\u7f6e\u6210\u5141\u8bb8\u8de8\u6e90\u8bf7\u6c42\u5c31\u884c"),(0,r.kt)("p",null,"\u5982\u679c\u670d\u52a1\u5668\u672a\u4f7f\u7528 ",(0,r.kt)("strong",{parentName:"p"},"*"),"\uff0c\u800c\u662f\u6307\u5b9a\u4e86\u4e00\u4e2a\u57df\uff0c\u90a3\u4e48\u4e3a\u4e86\u5411\u5ba2\u6237\u7aef\u8868\u660e\u670d\u52a1\u5668\u7684\u8fd4\u56de\u4f1a\u6839\u636eOrigin\u8bf7\u6c42\u5934\u800c\u6709\u6240\u4e0d\u540c\uff0c\u5fc5\u987b\u5728Vary\u54cd\u5e94\u5934\u4e2d\u5305\u542bOrigin"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"Access-Control-Allow-Origin: https://www.frontend.com\nVary: Origin\n")),(0,r.kt)("h3",{id:"2jsonp\u8de8\u57df"},"2\u3001JSONP\u8de8\u57df"),(0,r.kt)("p",null,"\u6d4f\u89c8\u5668\u4ec5\u4f1a\u9650\u5236\u811a\u672c\u5185\u53d1\u8d77\u7684\u8de8\u57df\u8bf7\u6c42\uff0c\u800c script\u3001img \u6807\u7b7e\u6ca1\u6709\u8de8\u57df\u9650\u5236\u3002\u6240\u4ee5\u53ef\u4ee5\u901a\u8fc7script \u6807\u7b7esrc\u5c5e\u6027\uff0c\u53d1\u9001\u5e26\u6709callback\u53c2\u6570\u7684GET\u8bf7\u6c42\uff0c\u670d\u52a1\u7aef\u5c06\u63a5\u53e3\u8fd4\u56de\u6570\u636e\u653e\u5230callback\u51fd\u6570\u4e2d\uff0c\u8fd4\u56de\u7ed9\u6d4f\u89c8\u5668\uff0c\u6d4f\u89c8\u5668\u7684callback\u89e3\u6790\u6267\u884c\uff0c\u4ece\u800c\u524d\u7aef\u62ff\u5230callback\u51fd\u6570\u8fd4\u56de\u7684\u6570\u636e\u3002"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-htmlbars"},"<script>\n var script = document.createElement('script');\n script.type = 'text/javascript';\n function handleCallback(data) {\n console.log('get data', data);\n }\n script.src = 'https://api.other.com/xx?callback=handleCallback';\n document.head.appendChild(script);\n<\/script>\n")),(0,r.kt)("h3",{id:"3nginx-\u670d\u52a1\u5668\u4ee3\u7406"},"3\u3001nginx \u670d\u52a1\u5668\u4ee3\u7406"),(0,r.kt)("p",null,"\u5176\u5b9e\u5bf9\u4e8e\u4efb\u4e00\u670d\u52a1\u5668\u90fd\u53ef\u4ee5\u505a\u4ee3\u7406\u8f6c\u53d1\u5904\u7406\uff0cnginx \u5927\u6982\u662f\u7528\u5f97\u6700\u591a\u4e14\u6700\u7b80\u5355\u7684\u670d\u52a1\u5668\u4ee3\u7406\u4e86\u3002"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"server {\n listen 80;\n server_name www.example.com;\n location /api {\n proxy_pass http://api.server.com; # \u540e\u7aef\u670d\u52a1\u5730\u5740\n }\n location / {\n root html/static; # \u524d\u7aef\u9759\u6001\u8d44\u6e90\u8def\u5f84\n # proxy_pass http://api.server.com; # \u6216\u524d\u7aef\u670d\u52a1\u5730\u5740\n }\n}\n")),(0,r.kt)("h3",{id:"4\u6784\u5efa\u5de5\u5177\u4ee3\u7406\u5f00\u53d1\u73af\u5883"},"4\u3001\u6784\u5efa\u5de5\u5177\u4ee3\u7406\uff08\u5f00\u53d1\u73af\u5883\uff09"),(0,r.kt)("p",null,"\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\u4e00\u822c\u4f1a\u76f4\u63a5\u4f7f\u7528 \u6784\u5efa\u5de5\u5177\u7684\u4ee3\u7406\uff08node server\u4ee3\u7406\uff09\u914d\u7f6e\uff0c\u6bd4\u5982 webpack"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-javascript"},"module.exports = {\n devServer: {\n proxy: {\n '/api': {\n target: 'http://localhost:3000',\n pathRewrite: { '^/api': '' },\n },\n },\n },\n};\n")),(0,r.kt)("h3",{id:"5\u7cfb\u7edfhost\u6dfb\u52a0\u57df\u540d"},"5\u3001\u7cfb\u7edfhost\u6dfb\u52a0\u57df\u540d"),(0,r.kt)("p",null,"\u6211\u4eec\u53ef\u4ee5\u5728\u7cfb\u7edf\u7684host\u6587\u4ef6 \u589e\u52a0 ",(0,r.kt)("inlineCode",{parentName:"p"},"ip = host")," \u6620\u5c04\uff0c\u672c\u5730\u8bbf\u95ee\u57df\u540dhost\u65f6\uff0c\u4f1a\u53bb\u8bbf\u95ee\u771f\u662fip\u5730\u5740\uff0c\u6bd4\u5982 127.0.0.1\uff0c\u4e00\u822c\u5728\u8c03\u8bd5\u9700\u8981SSO\u767b\u5f55\u7684\u5e94\u7528\u7684\u65f6\u5019\u7ecf\u5e38\u4f1a\u7528\u8fd9\u79cd\u65b9\u5f0f\u3002"),(0,r.kt)("p",null,"hosts\u6587\u4ef6\u4f4d\u7f6e\u5728\nWindows\uff1aC:\\Windows\\System32\\drivers\\etc\\hosts\nMac\uff1a/etc/hosts"),(0,r.kt)("h3",{id:"6windowpostmessage--iframe"},"6\u3001window.postMessage + iframe"),(0,r.kt)("p",null,(0,r.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage"},"window.postMessage")," \u65b9\u6cd5\u53ef\u4ee5\u901a\u8fc7\u7b2c\u4e8c\u4e2a\u53c2\u6570 ",(0,r.kt)("strong",{parentName:"p"},"targetOrigin")," \u5b89\u5168\u5730\u5b9e\u73b0\u8de8\u6e90\u901a\u4fe1\u3002"),(0,r.kt)("p",null,"\u793a\u4f8b\uff1a2\u4e2a\u8de8\u6e90\u9875\u9762\u7684\u901a\u4fe1"),(0,r.kt)("p",null,"aaa.com/a.html \u9700\u8981\u8de8\u57df\u8bf7\u6c42\u6570\u636e\u7684\u9875\u9762"),
1(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-htmlbars"},'<iframe\n src="http://bbb.com/b.html"\n id="iframe"\n></iframe>\n<script>\n const targetOrigin = \'http://bbb.com\';\n function receiveMessage(event) {\n // \u6211\u4eec\u59cb\u7ec8\u4f7f\u7528 origin \u548c source \u5c5e\u6027\u9a8c\u8bc1\u53d1\u4ef6\u4eba\u7684\u8eab\u4efd\n if (event.origin !== targetOrigin) return;\n console.log(event.data);\n }\n window.addEventListener("message", receiveMessage, false);\n window.postMessage(\'fetchUserInfo\', targetOrigin);\n<\/script>\n')),(0,r.kt)("p",null,"bbb.com/b.html \u662f\u540c\u6e90\u7684\u9875\u9762"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-htmlbars"},"<script>\n const targetOrigin = 'http://aaa.com';\n function receiveMessage(event) {\n if (event.origin !== targetOrigin) return;\n if (event.data === 'fetchUserInfo') {\n const user = { /** mock data */ };\n window.postMessage(JSON.stringify(user), targetOrigin); \n }\n }\n window.addEventListener(\"message\", receiveMessage, false);\n<\/script>\n")),(0,r.kt)("hr",null),(0,r.kt)("p",null,"\u4ee5\u4e0a\u662f\u6700\u5e38\u89c1\u7684\u51e0\u79cd\u8de8\u57df\u89e3\u51b3\u65b9\u6848\uff0c\u8fd8\u6709\u4e00\u4e9b\u4e0d\u592a\u5e38\u7528\u7684\u65b9\u6cd5 \u6bd4\u5982 "),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"document.domain + Iframe\uff08\u53ea\u80fd\u7528\u4e8e\u4e8c\u7ea7\u57df\u540d\u76f8\u540c\u7684\u60c5\u51b5\u4e0b\uff09"),(0,r.kt)("li",{parentName:"ul"},"window.location.hash + Iframe"),(0,r.kt)("li",{parentName:"ul"},"window.name+ Iframe"),(0,r.kt)("li",{parentName:"ul"},"Websocket")))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.