Java - 探究前后分离带来的跨域问题

<img><iframe><link><vedio></code>等，可以同src属性跨域访问 允许跨域提交表单/或<a href="https://so.csdn.net/so/search?spm=a2c6h.13046898.publish-article.37.59046ffaXBLh11&q=%E9%87%8D%E5%AE%9A%E5%90%91" target="_blank">重定向</a>请求</div></blockquote><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_1be1d14310844280a7c482336f130d76.gif%22%2C%22originWidth%22%3A240%2C%22originHeight%22%3A240%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A240%2C%22height%22%3A240%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h2 id="YtoJi"><a name="t3"></a><a></a>解决方案</h2><h3 id="BBsAq"><a name="t4"></a><a></a>服务端解决方案</h3><div>跨域请求分两种情况</div><h4 id="bay7t"><a name="t5"></a><a></a>简单请求</h4><ol><li>请求方法使用GET/HEAD/POST请求之一</li><li>仅能使用CORS安全的头部，Accept,Accept-Language, Content-Language,Content-Type</li><li>Content-Type的值只能是：text/plain,multipart/form-data,application/x-www-form-urlencoded三者其中之一</li></ol><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_bdd9408b17484971aefaba47c8be261c.png%22%2C%22originWidth%22%3A1078%2C%22originHeight%22%3A365%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1078%2C%22height%22%3A365%7D"></span></div><div>请求从domain a 发过来， 请求到web domain b , 如果这个时候domain b 返回一个允许，可以解决这个问题。</div><div>服务端解决方案： 在http响应头中添加 Access-Control-Allow-Origin 头，值为信任的站点</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_26e8e202253744d0b4d6827d421c0c7b.png%22%2C%22originWidth%22%3A946%2C%22originHeight%22%3A196%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A946%2C%22height%22%3A196%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h4 id="WZL6J"><a name="t6"></a><a></a>复杂请求</h4><div><strong>不符合简单请求条件的即为复杂请求，访问跨域资源前，需要发起preflight预检请求（OPTIONS请求）询问何种请求是被允许的，预检请求失败，则不会发起正式的业务请求，预检请求成功，然后发起正式请求。</strong></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_9b32e9bf47d54e5fb125bb8c2ea3ac56.png%22%2C%22originWidth%22%3A1485%2C%22originHeight%22%3A1067%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1485%2C%22height%22%3A1067%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_e25521050a664692a623a4529997649c.png%22%2C%22originWidth%22%3A240%2C%22originHeight%22%3A218%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A240%2C%22height%22%3A218%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h4 id="O8CZi"><a name="t7"></a><a></a>测试</h4><div>随便写个spring boot 的工程，启动2个端口 一个8080 一个8081 ，访问8080的页面，调用8081的后台服务 ， 用来测试</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_4752170c8cc94d59bbe7de17dad1aae9.png%22%2C%22originWidth%22%3A896%2C%22originHeight%22%3A119%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A896%2C%22height%22%3A119%7D"></span></div><h5 id="AnV04"><a></a>简单请求测试</h5><div>来看第一个</div><div>CASE1: 【GET请求】</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_8824bfc0d3e04b67809742d74fcdaa57.png%22%2C%22originWidth%22%3A863%2C%22originHeight%22%3A507%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A863%2C%22height%22%3A507%7D"></span></div><div>点击访问</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_4270b9b06c1b4515959088f51a52e605.png%22%2C%22originWidth%22%3A1040%2C%22originHeight%22%3A108%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1040%2C%22height%22%3A108%7D"></span></div><div>服务端后台的代码</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_2648db02011a4a339c0b838ed35f7cdb.png%22%2C%22originWidth%22%3A905%2C%22originHeight%22%3A179%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A905%2C%22height%22%3A179%7D"></span></div><div>添加</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22response.addHeader(%5C%22Access-Control-Allow_origin%5C%22%2C%5C%22http%3A%2F%2Flocalhost%3A8080%5C%22)%3B%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22qj91P%22%7D"></div><div>重启后， 重新测试</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_4606006186124c3d84280347b16a59ee.png%22%2C%22originWidth%22%3A774%2C%22originHeight%22%3A279%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A774%2C%22height%22%3A279%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><div>CASE2: 【表单请求】</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_fd99e2823a344161abefbcd28dacc89d.png%22%2C%22originWidth%22%3A975%2C%22originHeight%22%3A357%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A975%2C%22height%22%3A357%7D"></span></div><div>目前的后端代码</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_d5d02e14d29743e3a771d3a2a9ea82cc.png%22%2C%22originWidth%22%3A1004%2C%22originHeight%22%3A177%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1004%2C%22height%22%3A177%7D"></span></div><div>来 测试走一波</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_1bee980a1f884131ab57597f47ca6ed8.png%22%2C%22originWidth%22%3A1019%2C%22originHeight%22%3A122%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1019%2C%22height%22%3A122%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_bc1e89d30ad34066969c1f44991a41df.png%22%2C%22originWidth%22%3A190%2C%22originHeight%22%3A190%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A190%2C%22height%22%3A190%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_7bc9f0558c2048858f3095bac5bf6f85.png%22%2C%22originWidth%22%3A936%2C%22originHeight%22%3A182%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A936%2C%22height%22%3A182%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_a09e55a9d76147ad9afe3b99a265ce50.png%22%2C%22originWidth%22%3A300%2C%22originHeight%22%3A277%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A300%2C%22height%22%3A277%7D"></span></div><div>重启重新测试 ， OK</div><div data-card-type="block" data-ready-card="hr"></div><h5 id="GUG9V"><a></a>复杂请求测试</h5><div>【复杂请求】</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_6d198344f1dc40a98ae2d6736f93c0f3.png%22%2C%22originWidth%22%3A766%2C%22originHeight%22%3A370%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A766%2C%22height%22%3A370%7D"></span></div><div><strong>和上面Case2的请求一模一样，除了 Content-Type , 那 还能用上面的添加响应头解决吗？<br />答案是不能的。。。。。</strong></div><div>我们用wireshark来跟踪下 option 预检的 请求</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_60f8e4de8a244008ad272a63f976aa47.png%22%2C%22originWidth%22%3A1403%2C%22originHeight%22%3A250%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1403%2C%22height%22%3A250%7D"></span></div><div>Spring Boot 官方给出了解决方案</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_7f412873315d4542b39764132dcfb240.png%22%2C%22originWidth%22%3A703%2C%22originHeight%22%3A689%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A703%2C%22height%22%3A689%7D"></span></div><div>我们就看全局的这个配置吧</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_90792569c5e44841afdd7529ad4a3fb8.png%22%2C%22originWidth%22%3A646%2C%22originHeight%22%3A760%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A646%2C%22height%22%3A760%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_aa65e1c03b8643bb95503a09174491a0.png%22%2C%22originWidth%22%3A1061%2C%22originHeight%22%3A271%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1061%2C%22height%22%3A271%7D"></span></div><div>请求下 跟踪下</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_3da8320c6b0145e08112b87a0b475caf.png%22%2C%22originWidth%22%3A803%2C%22originHeight%22%3A170%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A803%2C%22height%22%3A170%7D"></span></div><div>good</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_4ff8953b700845758eebeb847295e675.png%22%2C%22originWidth%22%3A568%2C%22originHeight%22%3A547%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A568%2C%22height%22%3A547%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><div data-card-type="block" data-ready-card="hr"></div><h3 id="HIBzR"><a name="t8"></a><a></a>代理服务器，反向代理接口请求</h3><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22location%20%2Fapi%20%7B%5Cn%20%20%20rewrite%20%5E%2Fapi%2F(.*)%24%20%2F%241%20break%3B%5Cn%20%20%20proxy_pass%20http%3A%2F%2Flocalhost%3A8081%2F%3B%5Cn%20%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%22%2C%22id%22%3A%22i31kI%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_c844a62b6cbc4779a724622c6f83de6a.png%22%2C%22originWidth%22%3A863%2C%22originHeight%22%3A839%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A863%2C%22height%22%3A839%7D"></span></div><div><strong>说一下为什要rewrite， 因为 api 这个前缀仅仅用于前台页面发请求时候携带， 后台并没有 api这个context， 所以需要在nnginx 通过rewrite机制来将api 替换掉 。</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22rewrite%20%5E%2Fapi%2F(.*)%24%20%2F%241%20break%3B%5Cn%E2%80%A2%201%22%2C%22id%22%3A%221mp7a%22%7D"></div><div>这个就是 一 /api开头的请求， 替换为 $1 ， 这个$1就是 请求中/api后面的内容， break 即为 匹配到则不往后面找了。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_05d3b9e008ab4b53bc4c931f25bb0de1.png%22%2C%22originWidth%22%3A240%2C%22originHeight%22%3A233%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A240%2C%22height%22%3A233%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h3 id="YbQii"><a name="t9"></a><a></a>jsonp 方式</h3><div>基于</div><div>可用性：大型站点的图片，音视频等资源，希望部署在独立服务器上，为缓解当前服务的压力，开放某些特定的方式，访问非同源站点 。</div><div>如：<code><script><img><iframe><link><vedio></code>等，可以同src属性跨域访问 允许跨域提交表单/或重定向请求</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_21455ffc859b49418a9fa096bde81036.png%22%2C%22originWidth%22%3A489%2C%22originHeight%22%3A239%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A489%2C%22height%22%3A239%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_23ad42b0b41d46ac92348c6ecb9f7899.png%22%2C%22originWidth%22%3A865%2C%22originHeight%22%3A680%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A865%2C%22height%22%3A680%7D"></span></div><div>后台代码</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_7d92ab5f730c43fb80f1be43be00473a.png%22%2C%22originWidth%22%3A730%2C%22originHeight%22%3A200%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A730%2C%22height%22%3A200%7D"></span></div><div>测试走一波</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F2gjpvgln6kp4w_7d1535ebcc48400cb4eb5e7ee2152702.png%22%2C%22originWidth%22%3A1442%2C%22originHeight%22%3A325%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1442%2C%22height%22%3A325%7D"></span></div><div><strong>了解下就行了，实际中很少会用到jsonp来解决跨域问题</strong></div><div><br /></div>