新手学跨域

描述

协议 (http, https, ftp etc.) 、域名 (foo.com, bar.com, img.foo.com) 、端口 (80, 8080, ...) 其中有一个不一致即形成跨域。跨域是一种解决浏览器同源策略限制的手段，应根据场景选用合适的跨域方法，而不是在一种场景下随便哪个都可以。

表现

打开控制台，如果出现类似下面的错误信息或者带有cross-origin的错误信息，说明遇到了浏览器的 同源策略 限制。

思路

利用具有跨域能力的html标签：<img>、<script>、<iframe>和XMLHttpRequest支持的方法
注意：JS无法解决协议或端口造成的跨域问题

跨域的方法

• jsonp
• iframe
  ● document.domain
  ● window.name
  ● location.hash
  ● navigator (IE6 bug)
  ● postMessage
• CORS
  ● XMLHttpRequest (modern browser)
  ● XDomainRequest (IE8+)
• 图像Ping (略)
• flash (略)
• 代理/转发
  ● http-server
  ● webpack-dev-server
  ● nginx

准备工作

学习跨域前，先做下准备工作—在本地模拟跨域条件，直接用localhost 127.0.0.1 也行，不过不太方便，并且不能模拟子域。
我是用 WampServer 搭建的本地服务器，安装在E:\wamp，www目录在E:\htdocs，接下来要修改httpd.conf 和 httpd-vhosts.conf 文件，根据我的安装路径和版本是在E:\wamp\bin\apache\Apache2.2.17\conf\ 和 子目录 extra下。

httpd.conf

215 <Directory "E:/wamp/www/"> 这里我修改了web文件的位置 E:/htdocs
467 #Include conf/extra/httpd-vhosts.conf 去掉第一个#

httpd-vhosts.conf
删除26行以后的代码 添加

# localhost
<VirtualHost *:80>
    DocumentRoot "E:/htdocs"
    ServerName localhost
</VirtualHost>

# foo.com
<VirtualHost *:80>
    ServerName foo.com
    DocumentRoot "E:/htdocs/"
</VirtualHost>

# www.foo.com
<VirtualHost *:80>
    ServerName www.foo.com
    DocumentRoot "E:/htdocs/img/"
</VirtualHost>

# img.foo.com
<VirtualHost *:80>
    ServerName img.foo.com
    DocumentRoot "E:/htdocs/img/"
</VirtualHost>

最后修改host C:\Windows\System32\drivers\etc\hosts

127.0.0.1    localhost

127.0.0.1    foo.com
127.0.0.1    www.foo.com
127.0.0.1    img.foo.com

127.0.0.1    bar.com

在 E:\htdocs 目录下新建index.html文件，新建img目录并在里面新建1.txt，重启wamp，试着用foo.com，bar.com访问index.html文件，img.foo.com/1.txt访问1.txt文件，如果一切正常准备工作就做好了，如果还不行检查以上步骤或百度一下。

其他说明

图像Ping http://www.w3cmm.com/ajax/ima...
flash http://www.adobe.com/cn/devne...

内容仅代表个人的理解，可能有不准确的地方，如有不妥请自行斟酌