初识"跨域请求"和"同源策略"

本章节小编初识跨域请求和同源策略，分享获取新知，大家一起进步

文章目录

一、同源策略

二、跨域讲解

三、跨域请求解决方案

一、同源策略

什么是同源策略

所谓同源是指，域名，协议，端口相同。

所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。

拓展 什么是协议，域名，端口？

解释：假如一个网址是 http://baidu.com:8080？user=name&pwd=password

http:// 是协议

baidu.com 是域名（注意：前面加上“www”即www.baidu.com不是域名）

8080 是端口

user=name&pwd=password 是地址带的参数

举例

如果你有一个服务器A，你所需要的script，css，php文件都在服务器A，你写的html也在服务器A上，然后运行，出现了效果，如果你想在另一台电脑上运行你的项目（注意另一台电脑无论有没有开启服务器，效果还是会显示出来的），只要把你写在服务器A上的协议，域名，端口以及你的项目名称复制下来，在另一台电脑上运行，同样会出现相同的效果，这就实现了同源。

简单来说，就是你的协议，域名，端口甚至项目名称都一样，不同电脑都能实现同样的效果。

二、跨域讲解

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

举例

如果有两个服务器，服务器A和服务器B,服务器A上存储了php数据，script,甚至是css这些文件，而你在服务器B上只写了html，然后你所在的服务器B上动态创建script，css，php数据(使用ajax请求),向服务器A上请求你想要的script,css，php数请求据(使用ajax)这些文件，请求这些文件后，你再在服务器B上运行你的html，虽然你的地址是在服务器B上，但是你还是可以运行效果与在服务器A上运行的效果是一样的，这样就是跨域名，跨端口，跨协议，实现了跨域。

简单来说，就是你请求的文件，只要含有“src”,“href”这些属性，你就能在其他服务器上，请求你所需要的文件，然后在自己的服务器上运行，就实现了跨域（跨域名，跨端口，跨协议）。

三、跨域请求解决方案

关于跨域请求有很多解决方案，下面举两个常见的方案

①通过jsonp跨域

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信

小结：即是动态创建

（1）原生实现：

1

2

3

4

5

6

7

8

9

10

11

12

13

服务端返回如下（返回时即执行全局函数）：

handleCallback({"status": true, "user": "admin"})

1

（2）jquery ajax：

$.ajax({ url: 'http://www.test.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "handleCallback", // 自定义回调函数名 data: {} });

1

2

3

4

5

6

7

（3）vue.js：

this.$http.jsonp('http://www.test.com:8080/login', { params: {}, jsonp: 'handleCallback' }).then((res) => { console.log(res); })

1

2

3

4

5

6

（4）后端node.js代码示例：

var querystring = require('querystring'); var http = require('http'); var server = http.createServer(); server.on('request', function(req, res) { var params = qs.parse(req.url.split('?')[1]); var fn = params.callback; // jsonp返回设置 res.writeHead(200, { 'Content-Type': 'text/javascript' }); res.write(fn + '(' + JSON.stringify(params) + ')'); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

jsonp缺点：只能实现get一种请求。

② 跨域资源共享（CORS）

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

前端设置：

①原生ajax

// 前端设置是否带cookie xhr.withCredentials = true;

1

2

例子

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容 // 前端设置是否带cookie xhr.withCredentials = true; xhr.open('post', 'http://www.domain.com:8080/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=admin'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

②jQuery ajax

$.ajax({ ... xhrFields: { withCredentials: true // 前端设置是否带cookie }, crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie ... });

1

2

3

4

5

6

7

8

③vue框架

axios设置：

axios.defaults.withCredentials = true

1

vue-resource设置：

Vue.http.options.credentials = true

1

服务端设置

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

Java后台：

/* * 导入包：import javax.servlet.http.HttpServletResponse; * 接口参数中定义：HttpServletResponse response */ // 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/' response.setHeader("Access-Control-Allow-Origin", "http://www.domain.com"); // 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示 response.setHeader("Access-Control-Allow-Credentials", "true"); // 提示OPTIONS预检时，后端需要设置的两个常用自定义头 response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

1

2

3

4

5

6

7

8

9

10

11

12

13

The best investment is in yourself

2020.04.26 记录辰兮的第58篇博客

TCP/IP 域名注册服务

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。