105-跨域与解决跨域问题

1，出现跨域要满足两个条件：

非同源、AJAX请求

2，什么是同源策略？

这是浏览器的一种安全策略：指两个网址的协议，IP与port三者都相同，三者中有一个不同就是非同源。

例：

pathname不参与同源判断（pathname不同）-同源

协议不一样-异源

域名不同-异源

域名相同（IP：port）域名与IP：port解析后相同-同源

跨域的三种主要解决方案（自行解决的，后续会有egg框架）

1，CORS

原理：

在实际项目中，我们需要使用AJAX跨域请求其他服务器的资源，即服务器之间的资源共享，这时就需要解决跨域问题，CORS就是其中一种方式。

我们在后端发送数据包的头部设置这个资源被跨域请求时res.setHeader()跨域资源共享白名单：

用法：

在访问的浏览器的应答数据包头部设置某些计算机可访问

res.setHeader("Access-Control-Allow-Origin","*")表示任何计算机都可访问。

2，JSONP

原理：

利用script标签的src属性也可做网络请求，并且请求的资源没有跨域限制，但是请求过来的资源就会运行。我们可以将想得到的数据用函数参数的形式装起来，然后用JSON数据传给前端，前端就会运行这个预先设置的函数，以此操作得到的参数（网络资源数据）。

用法：

1.前端网页中用ajax请求跨域服务器的网址  会报跨域错误
	用script标签的src属性去请求跨域服务器的网址 不会报跨域错误,但是 会直接把请求过来的编码用v8引擎去运行
	
	
	2. 我们可以在后端写一个js引擎能识别的字符串发送给前端,这个字符串是这样的:
	' fn({"name":"karen"}) '
	前端可以用script标签的src属性去请求这个网址,请求完毕以后 v8就会直接运行这个编码 去调用fn函数,所以我们必须提前创建这个函数
	
	3.函数的名称问题:  前端可以通过querystring把函数名以参数的形式发送给后端
	后端解析了以后 直接拼接到数据中

3，Proxy

原理：

A在B服务器下运行的页面，页面中有其他网站C的AJAX网络请求，就会出现跨域问题。Proxy就是A访问B服务器的另一个接口，这个接口去去做网络请求（用其他网络请求工具如request），B服务器得到的数据返回给A。

发布于 2022-08-07 16:52

跨域

105-跨域与解决跨域问题

主要内容：

什么是跨域？

跨域的三种主要解决方案（自行解决的，后续会有egg框架）

原理：

用法：

2，JSONP

原理：

用法：

3，Proxy

原理：