跨域是什么（跨域是什么意思）

编程日记 • 2025-04-19 12:40 • 阅读 78

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

跨域指的是浏览器不能执行其它网站的脚本。是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

，只有当这三个条件同时满足相同时，我们就称之为符合同源策略，同源策略也可以看做是一个协议。

通常我们导航的url都是由这四部分组成的。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

同源策略限制行为：

但是有三个标签允许跨域加载资源：

Proxy通过服务端接口转发来实现对于跨域问题的问题，因为HTTP同源策略只在浏览器中生效。这里介绍几种不同Proxy代理方法：

在vue.config.js中利用 WebpackDevServer 配置本地代理

注意：项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置web服务器做代理，所以此方式只适用于开发测试阶段

上线时需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)

参考：Vue中如何解决跨域问题

参考：

目前最主流、最简单的方案，直接让后端设置响应头，允许资源共享就ok了

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

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

【前端设置】根据xhr.withCredentials字段判断是否带有cookie

vue框架

【服务端设置】

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

Java后台

参考：

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

核心思想：网页通过添加一个元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。