关于JS跨域访问简述

转自：微点阅读 https://www.weidianyuedu.com

>什么是跨域？

A网站想要获取B网站服务器上的资源，网站通过AJAX发送请求的时候，本地服务器地址与请求地址、协议类型（http）、IP地址（域名）、端口，三者有其一不同都称之为跨域请求资源。

>为什么要有跨域限制？

通过上面的解释不难发现，跨域限制主要是出于对用户安全的考虑。

因为每一次的HTTP请求，都会附带该请求地址对应的cookie信息，那么就可以做以下攻击：

1、用户登录某银行网站A，该网站在用户电脑上设置cookie信息。

2、用户打开恶意网站B，该网站也向网站A发送AJAX请求，该请求会验证网站A对应的cookie信息，因为已经登录过一次。

3、银行验证到用户cookie无误，response响应用户数据，此时用户数据就泄露给网站B的服务器了。

有了跨域限制，上面的情况就可以得到控制，上网也就更加安全。

>如何实现跨域？

一般有下面两种最常用的方式。

CORS

cors是一个W3C制定的跨域标准，全称是：Cross-origin resource sharing，这句话的含义就是跨域资源共享，这种方式主要应用在服务端。

他是通过设置服务端设置一个HTTP头：setHeader("Access-Control-Allow-Origin", "*")

如果Access-Control-Allow-Origin中有A，或者是通配符*，浏览器就会允许A跨域，通配符代表任何地址都能跨域。

客户端不需要作任何设置，还是按照AJAX请求一样，这样就能获取跨域资源。

JSONP

jsonp是通过script标签的src属性，我们都知道src属性能获取同一个ip服务器上，不同文件夹的文件，它其实就是一个HTTP请求，而且它支持跨域，不需要服务端设置直接就能跨域获取资源。

实际操作：

1、先定义一个函数，通过参数来接收数据，后端用参数来设置回调。

function toData(data){

console.log(data);

}

</script>

2、然后利用script标签发送一个请求，需要把回调函数的名字传到后端。

3、服务器通过该接口，拿到回调函数的名字，把它拼接成一个回调函数，再通过字符串的方式传到前端。

if(url=="/user"){

response.end(`${GET.callback}(${json})`);

}

明白到上面的原理，你就知道为什么jsonp不能发送post请求了~，这也是跨域请求最常用的方式。

服务端代理

直接通过服务端发送HTTP请求，服务端没有跨域限制，因为跨域不同源限制只是针对浏览器，服务端请求到数据后再发送到客户端。

关于JS跨域访问简述相关推荐

js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
js 跨域访问问题解决方法
什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 有什么完美的解决方案么 ...
js跨域访问获取json数组并解析
跨域访问需要在服务器端配置,客户端才能够访问服务器端: <?php //服务端返回JSON数据 $arr="[{'quesTitle':'关于专利申请','quesAskTi ...
JS跨域访问（ajax跨域）
好吧,国庆有点不务正业,玩了几天游戏,咳咳感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言为什么会出现跨域? 跨域的产生是因 ...
ASP.NET解决PDF.js跨域访问问题
PDF.js在访问pdf文件的时候,有时候会涉及到跨域问题,介绍一种.NET和PDF.js配合使用的方法. 前端代码: <script type="text/javascript&qu ...
[Vue.js]跨域访问四种解决方法
2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...
什么是JS跨域访问如何实现跨域访问
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
关于JS跨域访问介绍
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
什么是JS跨域访问？
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
利用cors，实现js跨域访问Tomcat下资源
第一步:页面js代码: function createCORSRequest(method, url){var xhr = new XMLHttpRequest();if ("withCre ...

关于JS跨域访问简述

关于JS跨域访问简述相关推荐

最新文章

热门文章