什么是跨域及解决跨域都有哪些方法？

article/2025/10/3 17:05:24

一.同源策略

浏览器为了隔离潜在的恶意文件，使用同源策略，限制从一个源加载的文档或脚本和另一个源的资源进行交互（不同源之间的文档，资源的交互）;
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 Ajax 请求

所谓同源（即指在同一个域）就是两个页面的协议（protocol），主机（host）和端口号（port）”三者相同;注意：跨域限制访问，其实是浏览器的限制。
在这里插入图片描述

二.什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
在这里插入图片描述
浏览器对跨域请求的拦截:

三、跨域解决方法

1.JSONP:(JSON with Padding)

1). JSONP 是什么

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

2).JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
①原生实现：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字// 处理服务器返回回调函数的数据
<script type="text/javascript">function dosomething(res){// 处理获得的数据console.log(res.data)}
</script>

②Vue.js：

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

2. CORS

1).CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法:
它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。缺点是不兼容某些低版本的浏览器；
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

2)CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
使用额外的HTTP头告诉浏览器被准许访问来自不同源服务器上的指定的资源。

3).CORS 的使用主要是服务器端的设置：

	// 设置响应头，设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");// 设置所有类型的头信息都可以接收.允许自定义头信息response.setHeader("Access-Control-Allow-Headers", '*');// 配置任意方法response.setHeader("Access-Control-Allow-Method", '*');// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");response.send('hello CORS');

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置
①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;xhr.open('post', 'http://www.domain2.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);}
};

②axios：

axios.defaults.withCredentials = true

3. webpack本地代理

在这里插入图片描述

在webpack.config.js中利用 WebpackDevServer 配置本地代理，详情配置查看devServer

    devServer: {port: 8080,proxy: {"/api": {target: "http://192.168.122.55:8088" // 后端接口}}}

4. 服务器使用Nginx的反向代理

server {listen       80;server_name  user.subignquan.com;location / {root   /usr/share/nginx/html;index  index.html index.htm;}}

注：现在主流框架都是用代理和 CORS 跨域实现的