js中跨域请求原理及2种常见解决方案

Posted 沐子馨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中跨域请求原理及2种常见解决方案相关的知识,希望对你有一定的参考价值。

一、同源策略:

说到跨域请求,首先得说说同源策略:

1995年,同源政策是由 Netscape 公司引入浏览器的。目前,所有浏览器都实行了这个政策。

同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同;目的就是为了保证用户信息的安全,防止恶意的网站窃取数据,防范跨站脚本的攻击,禁止客户端脚本(如 javascript)对不同域的服务进行跨站调用。

举例来说,http://www.example.com/dir/page.html 这个网址
协议是 ttp://
域名是 www.example.com
端口是 80(默认端口可以省略)
它的同源情况如下:
同源:
http://www.example.com/dir2/other.html
不同源:
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)

二、跨域请求:

所谓的跨域访问或者跨域请求,就是是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

三、跨域解决的两种常用方法:

 项目中常用的两种解决方案主要是:JSONP及CORS。

1、JSONP:

基本思想就是:网页通过添加一个<script src=‘’>元素,向服务器请求JSON数据(<script> 的src属性获得js代码, 不受同源政策限制)。服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

注:用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句。由于script脚本只可以通过get发送请求,所以jsonp这种方法只可以发送get请求,无法发送post请求。

具体做法:使用jQuery封装的Ajax,只需在客户端的Ajax请求的url中加入url?callback=?即可;

     服务器端需写入var callback = req.query.callback;返回的value需要封装成json,res.send(callback+‘(‘+json+‘)‘)。

2、CORS(Cross-Origin Resource Sharing):

跨域资源共享是一份浏览器技术的规范,以避开浏览器的同源策略,是 JSONP 模式的现代版。CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用 CORS 可以让前端工程师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好;另一方面,JSONP 可以在不支持 CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

具体做法:客户端不需要做什么,只需要在服务器端发送一个响应头即可:‘Access-Control-Allow-Origin’;

       如若允许所有域访问:Access-Control-Allow-Origin: *;如:header("Access-Control-Allow-Origin: *");

     如若只允许指定域访问:Access-Control-Allow-Origin: 域名A;如:header("Access-Control-Allow-Origin: http://www.test2.com");











以上是关于js中跨域请求原理及2种常见解决方案的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目中跨域问题的解决

vue+springboot前后端分离工程中跨域问题的解决

转JS跨域(ajax跨域iframe跨域)解决方法及原理详解(jsonp)

多种解决react中跨域问题方案

多种解决react中跨域问题方案

React中跨域问题的完美解决方案