跨域产生的原因和解决方法

因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。

解决跨域的方法：

1、通过jsonp跨域。

2、通过修改document.domain来跨子域。

3、使用window.name来进行跨域。

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据。

5、使用代理服务器，使用代理方式跨域更加直接，因为同源限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。

跨域的特点：

1、跨域只存在于浏览器，不在浏览器发请求是不会存在跨域问题的。

2、跨域是出现在ajax请求中，普通请求不会。

3、所有的跨域，都必须经过服务端的允许和配合，未经server端的允许和配合就实现跨越，说明浏览器有漏洞，不安全。

以上内容参考  百度百科-跨域网络

[ 之前的那篇博客 ]

介绍了 cors 和 jsonp 处理跨域的情况.

上述两种方案,都可以解决跨域请求.

但是都一个前提:

如果,后台不是我们写的,也没有办法让写后台的人去配合我们呢?

可以使用 proxy 代理的方式,结束上述产生的跨域请求问题.

一般思路是,我们自己写一个服务器.

本地的网站请求的数据会通过我们的服务器进行代理,由服务器发送真实的数据请求到目标数据后台.

目标数据后台把数据返回给我们自己的后台,在经由我们自己的后台转发给我们自己的前台.

原理很简单

既然了解了基本原理,就可以开始例子了.

例子总览:

server端的项目目录

server.js 提供 index.html 静态页面服务器以及 /proxy 跨域代理请求服务.

在 index.html 中

访问链接是:

经由自己后台服务器再次向 http://127.0.0.1:54321/data.json 并获得返回数据.

启动一个端口号为 54321 的 json 服务器.

最后在 index.html 中查看测试结果.

发现正确返回了 http://127.0.0.1:54321/data.json 的数据.

就表示自己写的代理服务器跨域请求数据成功了.

`

使用 Nginx 实现跨域请求和上述的原理一模一样.

只不过 Nginx 帮助我们做了服务转发请求这件事情.

具体流程如下:

具体操作如下:(MAC 系统中)

mac 系统在目录 /usr/local/etc/nginx/nginx.conf

注意:

同样成功的完成了跨域请求.

( 码云地址 )

---