@@ -6,6 +6,8 @@ export const metadata = {
66 duration: ' 20min'
77}
88
9+ # CORS 跨域资源共享详解
10+
911通过 XHR 实现的 Ajax 请求时有一个主要限制,来源于浏览器的同源策略。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
1012
1113所以默认情况下,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器引用程序也是至关重要的。
@@ -16,13 +18,42 @@ export const metadata = {
1618
1719下表给出了相对 ` http://store.company.com/dir/page.html ` 同源检测的示例:
1820
19- | URL | 结果 | 原因 |
20- | :----| :----:| :----|
21- | ` http://store.company.com/dir2/other.html ` | 成功 | 只有路径不同 |
22- | ` http://store.company.com/dir/inner/another.html ` | 成功 | 只有路径不同 |
23- | ` https://store.company.com/secure.html ` | 失败 | 不同协议 ( https 和 http ) |
24- | ` http://store.company.com:81/dir/etc.html ` | 失败 | 不同端口 ( http:// 80 是默认的) |
25- | ` http://news.company.com/dir/other.html ` | 失败 | 不同域名 ( news 和 store ) |
21+ <table >
22+ <thead >
23+ <tr >
24+ <th >URL</th >
25+ <th style = { { textAlign: ' center' }} >结果</th >
26+ <th >原因</th >
27+ </tr >
28+ </thead >
29+ <tbody >
30+ <tr >
31+ <td ><code >http://store.company.com/dir2/other.html </code ></td >
32+ <td style = { { textAlign: ' center' }} >成功</td >
33+ <td >只有路径不同</td >
34+ </tr >
35+ <tr >
36+ <td ><code >http://store.company.com/dir/inner/another.html </code ></td >
37+ <td style = { { textAlign: ' center' }} >成功</td >
38+ <td >只有路径不同</td >
39+ </tr >
40+ <tr >
41+ <td ><code >https://store.company.com/secure.html </code ></td >
42+ <td style = { { textAlign: ' center' }} >失败</td >
43+ <td >不同协议 ( https 和 http )</td >
44+ </tr >
45+ <tr >
46+ <td ><code >http://store.company.com:81/dir/etc.html </code ></td >
47+ <td style = { { textAlign: ' center' }} >失败</td >
48+ <td >不同端口 ( http:// 80 是默认的)</td >
49+ </tr >
50+ <tr >
51+ <td ><code >http://news.company.com/dir/other.html </code ></td >
52+ <td style = { { textAlign: ' center' }} >失败</td >
53+ <td >不同域名 ( news 和 store )</td >
54+ </tr >
55+ </tbody >
56+ </table >
2657
2758同源策略限制了一下行为:
2859
0 commit comments