码迷,mamicode.com
首页 > Web开发 > 详细

解决ajax跨域的方法原理详解之Cors方法

时间:2017-05-10 01:07:56      阅读:487      评论:0      收藏:0      [点我收藏+]

标签:简单   针对   如何   get   不同域   知识库   分离   通信   方案   

1、神马是跨域(Cross Domain)

 
对于端口和协议的不同,只能通过后台来解决。
 

一句话:同一个ip、同一个网络协议、同一个端口,三者都满足就是同一个域,否则就是

跨域问题了。而为什么开发者最初不直接定为一切可跨域的呢?默认的为什么都是不可跨域呢?这就涉及到了同源策

略,为了系统的安全,由Netscape提出一个著名的安全策略。现在所有支持JavaScript的浏览器都会使用这个策略。

所谓同源是,域名,协议,端口相同。当我们在浏览器中打开百度和谷歌两个网站时,百度浏览器在执行一个脚本的

时候会检查这个脚本属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行,如果没有同源策略,那

随便的向百度中注入一个js脚本,弹个恶意广告,通过js窃取信息,这就很不安全了。

 

说白点就是post、get的url不是你当前的网站,域名不同。例如在aaa.com/a.html里面,表单的提交action是bbb.com/b.html。

不仅如此,www.aaa.com和aaa.com之间也属于跨域,因为www.aaa.com是二级域名,aaa.com是根域名。

JavaScript出于安全方面的考虑,是不允许跨域调用其他页面的对象的(同源策略 Same-Origin Policy)。

 

关于JavaScript能否跨域通信的详细说明,见下表:

http://www.a.com/a.js访问以下URL的结果

URL说明是否允许通信
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/b.js 同一域名,不同端口 不允许
https://www.a.com/b.js 同一域名,不同协议 不允许
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://script.a.com/b.js 主域相同,子域不同 不允许
http://a.com/b.js 同一域名,不同二级域名(同上) 不允许
http://www.b.com/b.js 不同域名 不允许

2、为嘛要跨域

基于两个方面:

a. web应用本身是部署在不同的服务器上

b.基于开发的角度 --- 前后端分离

 

web应用本身是部署在不同的服务器上,对应的域名也就有所不同

 

比如百度。

 

主域名:https://www.baidu.com/

 

二级域名:http://image.baidu.com/ http://music.baidu.com/http://wenku.baidu.com/

 

 

 

需要在不同的域之间,通过ajax方式互相请求,是非常常见的需求。

 

基于开发的角度

 

现在提倡的前后端分离开发。

 

前端负责写htmlcssjs代码,需要向后台要数据,渲染到页面。

 

后台负责写业务逻辑,向前台提供数据。

 

 

 

后台提供的数据,作为前端如何才能拿到呢?

 

这就需要前后端进行协作

 

 

 

后台,只负责提供API,就是一个ulr,比如,

 

http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973

 

 

 

前台,需要通过ajax发起请求,去获取数据。

 

 

 

在开发的时候,

 

后台的代码部署在一个服务器上。

 

前端的代码部署在另外一个服务器上。

 

 

 

前台在向后台通过ajax去请求数据的时候,就涉及到跨域。

 

 

 

就比如,我们的后台已经开发好了一个功能,获取当前首页面的轮播图中的电影数据,给前台提供的url如下:

 

 

 

http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973

 

 

 

我是前端开发人员,需要获取该数据,然后渲染到页面上。

 

此时,必须要使用ajax方式。

 

 

3、肿么跨域

关于跨域,有多达七八种方案。

其中有如下三种方案,是需要重点关注:

a. Cors

b. Jsonp(重点)

c.代理

Cors

本意cross origin resource share,跨资源共享

场景:服务端的代码在我的控制范围之内,换言之,后台提供的api代码,我是有权限去操作的。只需要在服务端编写代码,浏览器端不用写任何代码。

 

这种方式最简单,只需要在服务端设置几个头信息即可。

node中,设置如下:

res.setHeader(‘Access-Control-Allow-Origin‘, "*"); //针对哪个域名可以访问,*表示所有

res.setHeader(‘Access-Control-Allow-Credentials‘, true); //是否可以携带cookie

res.setHeader(‘Access-Control-Allow-Methods‘, ‘POST, GET, PUT, DELETE, OPTIONS‘);

 

 今天先给大家提供最简单的一种跨域方法,后续再为大家介绍更多及更重要的方法!

 

解决ajax跨域的方法原理详解之Cors方法

标签:简单   针对   如何   get   不同域   知识库   分离   通信   方案   

原文地址:http://www.cnblogs.com/erwinyong/p/6833368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!